liste de liens sur image map

Version imprimable

bonjour,

j'ai une carte de france avec plusieurs points, et à chaque point correspond une liste de liens.

mon problème, c'est que je ne vois pas comment faire pour afficher une liste de liens lorsqu'on survol (ou qu'on clique, c'est pas important) un point, à la manière d'une infobulle...

voir l'exemple:

http://img90.imageshack.us/img90/8449/uuy0.jpg

mon type de code pour l'image map:
Code:

1 2 3 4 5 6 7 8 9 10 <map name="carte"> <li> <area shape="circle" alt="" title="" coords="488,157,10" href="#" target="" /> <ul> <li><a href="#">lien 1</a></li> <li><a href="#">lien 2</a></li> </ul> </li> </map> <img id="france" src="france.jpg" alt="" usemap="#carte" >
merci d'avance pour vos pistes!

03/09/2013, 14h43
Rafapouf

Bonjour Twisel,

veux-tu ou peux-tu utiliser Javascript ?
Si oui, regardes dans cette direction.
Avec un id sur tes area, tu peux ensuite lui dire d'afficher ou non ta liste <ul> ;)

Bonsoir
regarde si ca te convient ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
li:hover a{visibility:visible;}
li{visibility:hidden;}
ul{}
</style>
</head>
<body>
 
<map name="carte">
	<li>
			<area shape="circle" alt="" title="" coords="488,157,10" href="#" target="" />
		<ul>
                        <li><a href="site1.html">lien 1</a></li>
                        <li><a href="site2.html">lien 2</a></li>
                </ul>
        </li>
</map>
<img id="france" src="france.jpg" alt="" usemap="#carte" >
 
</body>
</html>