Affichage bulle area

Bonjour,

Juste un petit soucis surement simple pour vous ..... mais moins pour une débutante comme moi .... :oops:

J'ai une carte avec des area, je voudrais que lorsque l'on survole la zone je puisse afficher un texte avec une petite image

Code:

---

1 2 3 4 5 6 7 8

function afficheId(baliseId) { alert(baliseId) } function cacheId(baliseId) { .... }

---

Code:

---

1 2 3 4

<center><img src="Data/Mytho.png" style="border:0" usemap="#Map"></center> <map name="Map"> <area shape="rect" href="debut.html" coords="0,0,200,200" onMouseOver="afficheId('bonjour');" onMouseOut="cacheId('bloc')"> </map>

---

Pour l'instant j'arrive juste a afficher un 'alert' au passage de la souris, mais pas de bulle ....

Une idée ?

Thais

salut,

la fonction alert n'a rien a voir avec une bulle d'aide !
commence par définir un DIV qui représente ta bulle, cache le et lors du mouseover, affiche le et positionne le sur la souris

Salut,

merci pour ton aide.
Je sais pour le alert, c'etait juste pour valider que quand je passe ma souris, je rentre bien dans la finction afficheId

Mais mon soucis est que je ne sais pas comment dans la fonction javascript faire l'affichage de la bulle ....

Thais

Bonjour,
au moins 3 millions* de posts en parlent

Code:

---

1 2	oElem.style.display =' block'; // affiche l'élément oElem.style.display = 'none'; // masque l'élément

---

*chiffre donné par les organisateurs, mais bien moins d'après les forces de l'ordre

c'est pas les sources qui manquent !

http://javascript.developpez.com/tut...t-avec-jquery/

on peut également le faire en CSS, l’artillerie légère dans ce cas :mrgreen:

Bonjour,

J'ai effectivement regardé plusieur post, mais mon soucis est de cumulé les 2 fonctions qui séparément marche nickel :

AREA et les bulles
:

Code:

---

Each <a rel="tooltip" title="A paragraph or idea accompanied by <b>supporting details</b>">paragraph</a> <br>

---

et

Code:

---

1 2 3

<map name="Map"> <area shape="rect" href="Fiches.html" coords="127,156,202,200" > </map>

---

Un peu comme sur le site de Météo France http://france.meteofrance.com/france/accueil

Thais

tu pourrais utiliser "title" -> juste pour le texte !

sinon ajoute des mouseover/move/out pour déclencher l'affichage/placement/cache de ton DIV infobulle (comme dans ton 1er test avec Alert)

C'était ma logique mais je ne sais pas comment on n'affiche une bulle avec du texte et une image dans la fonction AfficheId de mon Javascript ....

Une idée ...

Merci

Thais

commence par creer le DIV représentant la bulle !
ajoute lui ces CSS :
position: absolute; display: none;

ensuite :
mouseover -> display: block
mouseout -> display: none
mousemove -> tu recup la position de la souris et tu l'assignes a ton DIV
avec jQuery le code ressemblera a ca :

Code:

---

$('#infobulle').css({left: e.pageX + 10, top: e.pageY - $('#infobulle').outerHeight()});

---

en JS pur :

Code:

---

1 2	infobulle.style.left = window.event.x + document.body.scrollLeft; infobulle.style.top = window.event.y + document.body.scrollTop;

---

tu as tous les blocs, a toi de chercher un peu