imàge-infobulle

Question

Bonne nuit tout le monde,

Je souh&#224;iter&#224;is cr&#233;er des infobulles comport&#224;nt une im&#224;ge &#224; l&#224; pl&#224;ce du texte, est-ce possible et, si oui, pourriez-vous m'indiquer le script correspond&#224;nt ? 
Merci d'&#224;v&#224;nce et d&#233;sol&#233; pour mes "&#224;" &#224;vec &#224;ccent, petit soucis de cl&#224;vier...

Bonne &#224;nn&#233;e &#224; tou(te)s !

chimelpremier · Answer

j'en ai fait une uvec image et texte qui date un peu :


http://perso.wanadoo.fr/michel.deboom/moncastel/

tucsoufle · Answer

salut,

tu peut faire un &#233;l&#233;ment (div ou autre qui contient ton image) qui est cach&#233; au premier abord 

mais qund tu fait un onmouseover sur un lien, cet &#233;l&#233;ment s'affiche

Je te donne une id&#233;e, tu me donnes une id&#233;e, nous avons chacun deux id&#233;es.
Mon site Internet

chimelpremier · Answer

ce que tui veux faire est simple :

et ton lien :

[blabla ton lien]

tucsoufle · Answer

oui mais ne pas oublier le onmouseout

donc comme ceci plutot :

[blabla onmouseover="document.getElementById('im1').style.visibility='visible'

    
onmouseout="document.getElementById('im1').style.visibility='hidden'
>ton lien]

Je te donne une id&#233;e, tu me donnes une id&#233;e, nous avons chacun deux id&#233;es.
Mon site Internet

chimelpremier · Answer

Je r&#233;pondais &#224; ta 2&#232;me question, je vois que tu as compris, mais tu n'as pas valid&#233; "r&#233;ponse accept&#233;e",je ne sais pas si &#231;a te convient ?

SYL20g · Answer

Merci &#224; vous, m&#224;is j'&#224;i bien peur de ne p&#224;s trop vous suivre... les codes que vous m'indiquez sont-ils &#224; ins&#233;rer d&#224;ns "body" et rien d&#224;ns "he&#224;d" ? et ne consistent-ils p&#224;s &#224; simplement rempl&#224;cer une im&#224;ge p&#224;r une &#224;utre &#224;u survol de l&#224; souris ? (d&#233;sol&#233;, je ne suis p&#224;s du tout un expert...)

tucsoufle · Answer

je ne peut pas valider cette r&#233;ponse pour une simple et bonne raison

je n'ai pas fait ce post et je ne posais aucune question mais mon message est juste une

r&#233;ponse &#224; SYL20g qui est l'auteur de ce post. - lol

Je te donne une id&#233;e, tu me donnes une id&#233;e, nous avons chacun deux id&#233;es.
Mon site Internet

chimelpremier · Answer

Autant pour moi 

Excusez-moi, j'ai tout embrouill&#233;, j'abandonne ici.

tucsoufle · Answer

oui tu doit bien ins&#233;rer ce code dans le body

et effectivement &#231;a peut servir &#224; afficher une image au survol de la souris

mais &#231;a sert dans ton cas &#224; afficher du texte au passage de la souris, c'est aussi le principe de l'infobulle



tu cr&#233;&#233; une zone &#224; un endroit pr&#233;cis, par exemple :


style="visibility:hidden" id="im1"
>et ici tu met ce que tu veut mettre dans l'infobulle

    donc une image du texte etc....


et ensuite l&#224; tu met le texte qui appelera l'infobulle en affichant le div ci-dessus
[blabla onmouseover="window.document.getElementById('im1').style.visibility='visible';"

    
onmouseout="window.document.getElementById('im1').style.visibility='hidden'
;">ton lien]


voila j'esp&#233;re que tu a compris


Je te donne une id&#233;e, tu me donnes une id&#233;e, nous avons chacun deux id&#233;es.
Mon site Internet

SYL20g · Answer

Merci Tucsoufle (et p&#224;s de soucis Chimelpremier, y'&#224; p&#224;s de bl&#232;me).

&#231;&#224; m&#224;rche, j'&#224;i mon infobulle-im&#224;ge qui &#224;pp&#224;r&#224;&#238;t en h&#224;ut &#224; g&#224;uche de l'&#233;cr&#224;n ! M&#224;inten&#224;nt, j'&#224;i un petit probl&#232;me, et une petite question.
Le probl&#232;me, c'est que l'infobulle &#224;pp&#224;r&#224;&#238;t derri&#232;re mon im&#224;ge-lien (j'&#224;i ess&#224;y&#233; de ch&#224;nger l&#224; "visibility" m&#224;is &#231;&#224; ne donne rien...).
Et l&#224; question, c'est : conn&#224;&#238;triez-vous un moyen pour que l'infobulle &#224;pp&#224;r&#224;isse &#224; l'endroit ou se trouve le curseur de l&#224; souris ?...
Voil&#224;, encore merci &#224; vous et p&#224;rdon d'&#224;buser de votre temps,

tucsoufle · Answer

pas de quoi,

tu utilise les css pour afficher a un endroit pr&#233;cis

et un script javascript pour d&#233;tecter la position du curseur, je n'en connais pas mais bon

je suis qu'avec un peu de recherche tu trouve &#231;a facilement  ici m&#234;me dans les sources.

en tapant par exemple "position curseur" tout simplement



bonne chance

Je te donne une id&#233;e, tu me donnes une id&#233;e, nous avons chacun deux id&#233;es.
Mon site Internet

cs_roro06 · Answer

Bonjour
Voici ce que j'utilise pour connaitre la position de la souris (pas de moi, mais fonctionne tr&#232;s bien):

var x = 0;
var y = 0;

posX = 0;
posY = 0;


if (document.getElementById)
   {
   if(navigator.appName.substring(0,3).toLowerCase() == "net")
      {
   document.captureEvents(Event.MOUSEMOVE);
   }
   document.onmousemove = posSouris;
 }


function posSouris(e)
   {   x (navigator.appName.substring(0,3) "Net") ? e.pageX : event.x+document.body.scrollLeft;   y (navigator.appName.substring(0,3) "Net") ? e.pageY : event.y+document.body.scrollTop;
   }



Cordialement
Roro webDev

SYL20g · Answer

Merci Roro :-) Le probl&#232;me, c'est que je ne m'y conn&#224;is p&#224;s &#224;ssez pour &#224;ssocier le coup du positionnement de souris &#224;vec celui de l'infobulle... (suis un peu p&#233;nible, trouvez p&#224;s ?...)

cs_roro06 · Answer

Bonjour
Il faut rajouter dans la fonction posSouris() les lignes :
   document.getElementById("im1").style.top=y;
   document.getElementById("im1").style.left=x;
par contre, rajoutes 
;position:absolute" id="im1"
>

Ton truc suivra tous les mouvements de la souris.

Cordialement
Roro webDev

cs_roro06 · Answer

Bonjour
PS : Tu arrives &#224; programmer avec une touche "a" HS ?
Cordialement
Roro webDev

Imàge-infobulle

15 réponses

Votre réponse

Discussions similaires