Image map et changement de couleur de l'area au survol [Sources]

**SpaceFrog** · 23/08/2010, 11h29

Imaginez une carte de France des départements.
Le but: changer la couleur du département survolé.

Ne pouvant influer sur le couleur de background d'un area de map, il faut jouer avec la transparence.

Les bases:
un div avec en image de fond la carte principale initiale.
dans l'exemple: bg.png

dans ce div une image entièrement transparente de même dimensions qui supportera le map.
dans l'exemple 0.png

le map avec les polygones pour chaque zone

puis une image de même dimension pour chaque area avec juste la zone colorisée et le reste transparent
dans l'exemple 2.png, 3.png et 4.png

Le principe:
Lors du survol d'un area, on modifie le src de l'image transparente pour lui appliquer le src de la zone colorée correspondante.
Sur le onmouseout on retablit le src de l'image transparente.

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
25
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nouvelle page 2</title>
<script type="text/javascript">
function swapPic(zone,nr){
var pic=document.getElementById('hovered')
pic.src='Areas/'+nr+'.png'
zone.onmouseout=function(){pic.src='Areas/0.png'}
}
</script>
<style type="text/css">
img {border:0;}
</style>
</head>
<body>
<div id="pic" style="height: auto; width: auto; background-image: url('Areas/bg.png'); background-repeat: no-repeat">
<img id="hovered" src="Areas/0.png" usemap="#Map" width="100" height="100" />
<map name="Map">
<area href="#" onmouseover="swapPic(this,2)" shape="polygon" coords="20, 64, 13, 51, 14, 34, 24, 19, 38, 12, 56, 13, 69, 21, 79, 41, 75, 54, 71, 57, 55, 54, 39, 57">
<area href="#" onmouseover="swapPic(this,3)" shape="polygon" coords="22, 68, 40, 57, 56, 57, 71, 58, 66, 67, 51, 75, 33, 74">
<area href="#" onmouseover="swapPic(this,4)" shape="polygon" coords="16, 69, 15, 79, 22, 88, 36, 95, 51, 96, 76, 93, 86, 85, 90, 76, 90, 67, 84, 61, 77, 59, 70, 68, 57, 76, 37, 78, 28, 73, 19, 68"></map>
</div>
</body>
</html>

Les images jointes sont à placer dans un répertoire nommé Areas

Les limites de ce système résident dans la taille et le nombre des images nécessaires.
Prévoir un preload des images.

Page de démo

_

Image map et changement de couleur de l'area au survol [Sources]

Contribuez

Mode arborescent

Discussions similaires

Partager

Partager