Afficher une bulle au survol d'une partie d'une carte

[Meeuuuhhh]

Bonjour,

J'ai un truc à réaliser et je ne vois pas du tout comment faire vu que moi et javascript, on est pas très pote.

En gros, j'affiche une carte de France, divisée en départements, comme celle-ci :

L'idée, c'est que c'est pour un annuaire. Pour chaque département, il y a des inscrits.
Donc si je survole le département des Yvelines, par exemple, je souhaite que dans la bulle s'inscrive :

Département : Yvelines
Inscrits : 45

Donc le nombre d'inscrits, je le récupère depuis la BD avec javascript, avec le numéro et le nom du département.

Ensuite, je pense qu'il faut que je fasse une map sur la carte et qu'au survol, les liens déclenchent une action javascript, qui aille chercher les informations récupérées en PHP depuis la BD et passées dans un tableau javascript.

Ok...

Mais alors là, c'est un peu le grand vide :?


Si quelqu'un peut m'aider... Merci d'avance !


**edit**
Ca peut peut être se faire en css d'ailleurs ?

 

[u73256]

Tu peux essayer ça :

HTML :
<a href="nogo" rel="nofollow" class="bubulle"><span>Département :Yvelines<br />
Inscrits : 45</span>map</a>
CSS :
a.bubulle {font-size: 14px;color: #FFCC00}
a.bubulle span {display:none}
a.bubulle:hover {border: 0;position: relative;z-index: 500;text-decoration:none}
a.bubulle:hover span {font-weight:300;font-style: normal;display: block;position: absolute;top: 18px;left: -18px;padding: 5px;color: #fff;background-color:#18191D;border:1px solid #313137;width:170px;font-size: 12px;margin-top: 14px;text-indent: 0px}

après c'est affaire de gout pour l'habillage ;-)

 

[zeb]

le plus simple c'est une map

regarde ici sur les personages : -http://compagnie.stanislas.free.fr/sophie.html

 

[u73256]

le plus simple c'est une map

c'est de cela dont on parle. :wink:

 

[Meeuuuhhh]

Merci pour vos réponses.

C'est pas trop mal ton truc Hiseo, mais je pense à un truc un peu plus abouti, comme ça par exemple :

http://r-hunel.developpez.com/tutoriels/css/info-bulle/

http://r-hunel.developpez.com/tutoriels ... emple.html


Ca s'affiche plus vite et c'est personnalisable.

 

[zeb]

le plus simple c'est une map

c'est de cela dont on parle. :wink:

c'est de cela dont on parle en effet mais ton exemple est un peut creux pour qqun qui ne connais pas d'où la précision dans le cadre d'une page. au fait ou est le <map> dans ton exemple ???

HTML :
<a href="nogo" rel="nofollow" class="bubulle"><span>Département :Yvelines<br />
Inscrits : 45</span>map</a>

CSS :
a.bubulle {font-size: 14px;color: #FFCC00}
a.bubulle span {display:none}
a.bubulle:hover {border: 0;position: relative;z-index: 500;text-decoration:none}
a.bubulle:hover span {font-weight:300;font-style: normal;display: block;position: absolute;top: 18px;left: -18px;padding: 5px;color: #fff;background-color:#18191D;border:1px solid #313137;width:170px;font-size: 12px;margin-top: 14px;text-indent: 0px}

Mais, Hiseo, si tu préfère que je me taise et que j'aille joueur ailleurs, tu peut me le dire plus simplement c'est pas un problème ...

 

[pouloupoupo]

Tu as cette librairie javascript:
http://www.bosrup.com/web/overlib/