Infobulles

Résolu
nutty91 Messages postés 9 Date d'inscription vendredi 7 juillet 2006 Statut Membre Dernière intervention 5 juillet 2007 - 2 juil. 2007 à 13:57
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 - 3 juil. 2007 à 08:07
Bonjour, ne sachant pas trop où poster cette question j'en viens à la poser ici en espérant que quelqu'un puisse m'aider.

Je désire réaliser une carte réactive au passage de la souris qui affiche en fonctiondel a position du curseur sur l'image de fond uen infobulle qui contienne elle meme une image et du texte, j'ai cherché un peu partout mais je n'avance pas, je n'ai que de trés faible base en javascript

Merci d'avance pour le temps que vous voudrez bien me consacrer.

Nutty

PS: les zones réactives sont des rectangle, j'ai bien réussi a découper mon image avec des map/area, mais apperement ce n'est pas la meilleur solution pour arriver à ce dont j'ai besoin...Help me ...

5 réponses

cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
2 juil. 2007 à 14:55
>>au survol de la zone cela affiche une infobulle contenant une image et
du texte
    un div, un span, un iframe... caché que l'on positionne et montre au onmouseover
       ( ou onmousemove ) et que l'on cache au onmouseout.
    ( style    display="none" ou "inline", position:absolute, top et left mis à jour
                   avec la position de la souris )

    tu trouveras de nombreuses explications/exemples sur les infobulles dans ce site.
    ( nickadele a mis un script valable partout, toujours ). le fait que ce soit
    sur un area n'a pas d'importance ( c'est un élément comme un autre )
  
>>c'est possible de faire sa ds un onmouseover ?
    ben oui. dans tous les évênements on peut appeler du javascript.
    on y fait ce qu'on veut.

>>apres le title
de l'area shape
    ça... pas compris...
    mais title c'est du texte qui est affiché au survol de l'élément.





<hr />



Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
3
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
2 juil. 2007 à 14:05
Bonjour,

>>j'ai bien réussi a découper mon image avec des map/area
    et bien alors ? c'est ce qu'il faut faire..
    qu'est-ce qui ne fonctionne pas ?

<map   ...>
    [#
    ...
   

<hr />
Cordialement                Bul     []mon Site]     [M'écrire]
<hr />
0
nutty91 Messages postés 9 Date d'inscription vendredi 7 juillet 2006 Statut Membre Dernière intervention 5 juillet 2007
2 juil. 2007 à 14:30
Bonjour Bul,
En fait j'aimerais arrivé à un rendu à peut pres similaire à celui sur ce site :
http://www.cssplay.co.uk/menu/mapper.html
qu'au survol de la zone cela affiche une infobulle contenant une image et du texte, c'est possible de faire sa ds un onmouseover ? apres le title de l'area shape ?

Je pose peut être des questions un peu stupide, désolé si c'ets le cas mais je ne maîtrise pas trés bien encore ces évenements ...

Merci de ta rapidité , j'espere que tu tiens la solution :)  Nutty
0
nutty91 Messages postés 9 Date d'inscription vendredi 7 juillet 2006 Statut Membre Dernière intervention 5 juillet 2007
2 juil. 2007 à 16:44
Merci pour les infos, le code est un peu compliqué à mon goût mais je vai m'y mettre pour essayer de tout comprendre.

J'aurais pensé qu'il y avais plus simple pour une simple infobulle ^^ mais je suis surement naïf :)

En tout cas merci
Nutty
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
3 juil. 2007 à 08:07
>>j


'aurais pensé qu'il y avais plus simple pour une simple infobulle




    oui, mais solution incomplète... qui peut convenir.

   
un div, un span, un iframe... caché que l'on positionne et montre au
        onmouseover ( ou onmousemove ) et que l'on cache au onmouseout.
    : quelques lignes en html/javascript.



<hr />



Cordialement                Bul     [mon Site]     [M'écrire]



<hr />
0
Rejoignez-nous