liste de liens sur image map

**twisel** · 02/09/2013, 18h05

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:

mon type de code pour l'image map:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

**Rafapouf** · 03/09/2013, 14h43

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>

**winow** · 03/09/2013, 20h48

Bonsoir
regarde si ca te convient ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

liste de liens sur image map

HTML

Vue hybride

Discussions similaires

Partager

Partager