Infobulles [Résolu]

Signaler
Messages postés
9
Date d'inscription
vendredi 7 juillet 2006
Statut
Membre
Dernière intervention
5 juillet 2007
-
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
-
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

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
35
>>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 />
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
35
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 />
Messages postés
9
Date d'inscription
vendredi 7 juillet 2006
Statut
Membre
Dernière intervention
5 juillet 2007

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
Messages postés
9
Date d'inscription
vendredi 7 juillet 2006
Statut
Membre
Dernière intervention
5 juillet 2007

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
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
35
>>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 />