> Tous les forums > Forum des Webmasters
 Centrer l'infobulle Popper de Mike McGrathSujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
akwabon
  Posté le 18/12/2008 @ 21:31 
Aller en bas de la page 
Petit astucien

J'utilise depuis longtemps l'infobulle Popper de Mike McGrath pour des documents pédagogiques. Et je viens de découvrir qu'un certain Santonien (post de 2004 - merci Santonien) me permet avec 3 ajouts minuscules de mettre des images dans les bulles.

http://forum.telecharger.01net.com/telecharger/programmation_et_developpement/html__javascript/infobulle_avec_image_integree-311271/messages-1.html

Le néophyte tâtonnant que je suis a besoin d'aide pour positionner les infobulles contenant des images au centre de l'écran. Sinon, quand l'image est assez grande, l'utilisateur n'arrête pas de voyager dans l'ascenseur.

Merci.

Publicité
akwabon
 Posté le 22/12/2008 à 00:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Je mets sous ce message le script complet d'un exemple qui marche, après avoir corrigé une petite erreur du script original dont je donnais le lien dans mon premier message. Pour tester il suffira de mettre une image appelée image.jpg dans le dossier.

J'ai fini par découvrir que le positionnement de l'infobulle était déterminé par :

function get_mouse(e)
{
var x = (nav) ? e.pageX : event.x+document.body.scrollLeft;
var y = (nav) ? e.pageY : event.y+document.body.scrollTop;
skn.left = x-60;
skn.top = y+20;
}

ce qui place sous le lien et un peu à droite l'inbobulle contenant du texte, ou une image, ou les deux.

Je voudrais savoir si on peut centrer l'infobulle sur l'écran, quelle que soit la dimension de l'infobulle (elle s'adapte à la dimension de l'image, ce qui est bien pratique).

Autre question : ça marche avec IE et pas avec Firefox que je viens de télécharger et pourtant la case pour empêcher les popup n'est pas cochée.

Voici le script complet :

_______________________________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>Image avec texte dans infobulle Popper</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE>.popper {
VISIBILITY: hidden; POSITION: absolute
}
</STYLE>

<META content="MSHTML 6.00.6000.16788" name=GENERATOR></HEAD>
<BODY>
<div class=popper id=topdeck></div>
<P>
<SCRIPT>
// By Mike McGrath http://website.lineone.net/~mike_mcgrath/
var nav = (document.layers);
var iex = (document.all);
var skn = (nav) ? document.topdeck : topdeck.style;
if (nav) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;

function pop(pic,msg,bak) {
var content ="<TABLE WIDTH=130 BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=#000080><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR="+bak+"><TR><TD><FONT COLOR=#000000 SIZE=2><CENTER><img src="+pic+"><BR>"+msg+"</CENTER></FONT></TD></TR></TABLE></TD></TR></TABLE>";
if (nav) {
skn.document.write(content);
skn.document.close();
skn.visibility = "visible";
}
else if (iex)
{
document.all("topdeck").innerHTML = content;
skn.visibility = "visible";
}
}

function get_mouse(e)
{
var x = (nav) ? e.pageX : event.x+document.body.scrollLeft;
var y = (nav) ? e.pageY : event.y+document.body.scrollTop;
skn.left = x-60;
skn.top = y+20;
}

function kill()
{
skn.visibility = "hidden";
}
</SCRIPT>
<P>Passer la souris sur le <A onmouseover="pop('Image.jpg','Ecrire ici le texte sous l\'image','lightyellow')"
onmouseout=kill() href="image.jpg" ;>lien</A> pour faire afficher la photo</P>
</BODY></HTML>

akwabon
 Posté le 22/01/2009 à 07:21 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Si ça peut intéresser quelqu'un :

J'ai trouvé infiniment mieux que l'infobulle de Mike McGrath.

Celles de Dynamic Web Coding, appelées Tooltips, sont :

  • 100% compatibles IE et FF
  • on peut mettre du texte très long
  • on peut y mettre des grandes images
  • on peut mettre des images accompagnées de texte
  • on peut les centrer
  • on peut mettre des liens à l'intérieur : comme elles peuvent rester figées au centre de l'écran on peut déplacer la souris pour aller cliquer un lien.
  • le formatage du texte est possible

Pour moi : la perfection !

Gratuites pour une utilisation non commerciale ; 35 $ pour un site commercial. La documentation est en anglais mais chaque infobulle est présentée dans un petit exemple, donc pas de problème.

http://www.dyn-web.com/

Merci à eux.



Modifié par akwabon le 22/01/2009 07:35
elle
 Posté le 22/01/2009 à 12:57 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

akwabon a écrit :

J'ai trouvé infiniment mieux que l'infobulle de Mike McGrath.

Celles de Dynamic Web Coding, appelées Tooltips, sont :

  • 100% compatibles IE et FF
  • on peut mettre du texte très long
  • on peut y mettre des grandes images
  • on peut mettre des images accompagnées de texte
  • on peut les centrer
  • on peut mettre des liens à l'intérieur : comme elles peuvent rester figées au centre de l'écran on peut déplacer la souris pour aller cliquer un lien.
  • le formatage du texte est possible

Pour moi : la perfection !

À condition que JavaScript soit activé...

akwabon
 Posté le 22/01/2009 à 15:34 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

à elle

yes of course

Mais j'ai déjà tellement de mal à bricoler des petits bouts de javascript que je ne me vois pas me lancer (à mon âge !) dans quelque chose d'encore plus compliqué !!!

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
163,94 €SSD Corsair Force MP600 1 To (NMVe M.2 Gen4, 4950/4250 Mo/s) à 163,94 € livré
Valable jusqu'au 13 Mai

Amazon Allemagne fait une promotion sur le SSD Corsair Force MP600 1 To (NMVe M.2 Gen4) qui passe à 159,23  € (avec la TVA ajustée). Comptez 4,61 € pour la livraison en France soit un total de 163,94 € livré alors qu'on le trouve ailleurs à partir de 180 €. Ce SSD utilise une interface M.2 NVMe PCIe Gen4 x 4 pour une connexion simple et des performances exceptionnelles : jusqu’à 4950 Mo/s en lecture séquentielle et jusqu’à 4250 Mo/s en écriture séquentielle. Le SSD est doté de la technologie 3D TLC NAND haute densité offrant une endurance d’écriture durable et assorti d’une garantie de cinq ans. Il est accompagné d'un dissipateur thermique.

Vous pouvez utiliser votre compte Amazon France sur Amazon Allemagne et il n'y a pas de douane. Si vous êtes perdu en allemand, vous pouvez traduire le site en anglais.


> Voir l'offre
155,99 €SSD externe portable USB 3.1 SanDisk Extreme 1 To NVME (1050 Mo/s) à 155,99 €
Valable jusqu'au 14 Mai

Amazon fait une promotion sur le SSD externe portable USB 3.1 SanDisk Extreme 1 To NVME qui passe à 155,99 € alors qu'on trouve le SSD à 200 € ailleurs. Le disque SSD SanDisk Extreme NVME Portable 1 To permet, grâce à sa connectique USB 3.1, des haute vitesse de transfert pouvant aller jusqu'à 1050 Mo/s grâce au disque NVMe qu'il contient. Sa coque robuste et certifiée IP55 (eau et poussière) protège vos données partout où vous allez. Vous ne craindrez pas de l'emporter partout avec vous grâce à sa conception robuste et résistante avec un coeur de SSD résistant aux chocs. Le logiciel SanDisk inclu SecureAccess peut crypter vos fichiers personnels. Garantie 5 ans. Interface : USB 3.1 Type A et C.


> Voir l'offre
199,00 €Smartphone Poco X3 Pro (6,67 pouces 120 Hz, Snapdragon 860, 6 Go Ram, 128 Go stockage) à 199 €
Valable jusqu'au 14 Mai

Amazon fait une belle promotion sur le tout récent smartphone Poco X3 Pro qui passe 199 € au lieu de 249 €. Il est équipé du tout dernier processeur Qualcomm Snapdragon 860 (8 coeurs), de 6 Go de RAM, de 128 Go de stockage et d’un écran de 6,67 pouces ultra fluide 120 Hz. Il comprend aussi une Quad-Caméra de 48 MP avec IA et une caméra selfie poinçonnée de 20 MP. Il comprend une grande batterie de 5160 mAh, pour une utilisation sur plusieurs jours (supporte la charge rapide de 33W). Le POCO X3 Pro dispose également d'un capteur d’empreinte digitale sur le côté et une prise jack 3,5 mm pour vous permettre de brancher vos haut-parleurs ou vos écouteurs filaires. Avec GPS, NFC, Bluetooth 5, WiFi, USB C. Le tout tourne sous Android 10.


> Voir l'offre

Sujets relatifs
Centrer menu!!
Comment centrer le menu
changer le style de l'infobulle
centrer mon menu deroulant
Centrer élément sans tenir compte du défilement ho
centrer, aligner...
Centrer deux blocs
impossible de centrer un resultat
Infobulle marche pas sur IE
Centrer la découpe de mon site
Plus de sujets relatifs à Centrer l''infobulle Popper de Mike McGrath
 > Tous les forums > Forum Forum des Webmasters