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

WRInaute passionné
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 :

france-departement.gif


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 ?
 
WRInaute discret
Tu peux essayer ça :
Code:
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 ;-)
 
WRInaute accro
le plus simple c'est une map

regarde ici sur les personages : -http://compagnie.stanislas.free.fr/sophie.html
 
WRInaute accro
Hiseo a dit:
zeb a dit:
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 ...
 
Discussions similaires
Haut