Ouvrir des images avec des zones réactives

Je ne vois aucun souci à modifier le src et le map en même temps à partir de l'evenement onclick de la zone
Dans l'exemple qui suit l'image pivote d'1/4 de tour à chaque click mais ce n'est toujours que la zone rouge qui est cliquable :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script type="text/javascript">
var tabImg=new Array()
for(i=1;i<5;i++){
tabImg[i]=new Image();
tabImg[i].src="images/quarts"+i+".png"
}
 
function swapPic(nr){
var mysrc="", mymap=""
switch(nr){ 
			case 1: 	mysrc="quarts1.png";
						mymap="#one";
						break;
			case 2: 	mysrc="quarts2.png";
						mymap="#two";
						break;
			case 3: 	mysrc="quarts3.png";
						mymap="#three";
						break;
			case 4: 	mysrc="quarts4.png";
						mymap="#four";
						break;
			}			
document.getElementById('foo').src="images/"+mysrc;
document.getElementById('foo').useMap=mymap;
}
 
</script>
</head>
<body>
<map name="one">
<area href="#" shape="rect" coords="0, 0, 100, 100" onclick="swapPic(2);return false;">
</map>
<map name="two">
<area href="#" shape="rect" coords="100, 0, 200, 100" onclick="swapPic(3);return false;">
</map>
<map name="three">
<area href="#" shape="rect" coords="100, 100, 200, 200" onclick="swapPic(4);return false;">
</map>
<map name="four">
<area href="#" shape="rect" coords="0, 100, 100, 200" onclick="swapPic(1);return false;">
</map>
 
<img src="images/quarts1.png" useMap="#one" width="200" height="200" id="foo"/><br/>
 
</body>
</html>

A noter que si l'on rationalise le nom des images et des map on peut se passer du switch:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type="text/javascript">
var tabImg=new Array()
for(i=1;i<5;i++){
tabImg[i]=new Image();
tabImg[i].src="images/quarts"+i+".png"
}
 
function swapPic(nr){
var mysrc="", mymap=""
document.getElementById('foo').src="images/quarts"+nr+".png";
document.getElementById('foo').useMap="#_"+nr ;
}
 
</script>
</head>
<body>
<map name="_1">
<area href="#" shape="rect" coords="0, 0, 100, 100" onclick="swapPic(2);return false;">
</map>
<map name="_2">
<area href="#" shape="rect" coords="100, 0, 200, 100" onclick="swapPic(3);return false;">
</map>
<map name="_3">
<area href="#" shape="rect" coords="100, 100, 200, 200" onclick="swapPic(4);return false;">
</map>
<map name="_4">
<area href="#" shape="rect" coords="0, 100, 100, 200" onclick="swapPic(1);return false;">
</map>
 
<img src="images/quarts1.png" useMap="#_1" width="200" height="200" id="foo"/><br/>
 
</body>
</html>