Images réactives en cascade
Bonjour à tous,
Je réalise un site sur lequel des liens de la première page ouvrent des images en position fixe.
Jusque là pas de problème :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
</head>
<body>
<IMG name="image" src="cabinet.jpg" usemap="#" border=0>
<a href=# onclick="document.image.src='image1.jpg';">Lien 1</a>
<a href=# onclick="document.image.src='image2.jpg';">Lien 2</a>
<a href=# onclick="document.image.src='image3.jpg';">Lien 3</a>
</body>
</html> |
Là où ça se corse c’est que les images ouvertes doivent comporter des zones réactives, qui ne sont pas au même endroit sur chaque image (ça serait trop simple). Je pensais m’en tirer en créant divers <MAP> qui seraient appelés en même temps que l’image concernée lors du click sur le lien. Voici donc ce que j’avais fait :
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
|
<html>
<head>
</head>
<body>
<IMG name="image" src="cabinet.jpg" usemap="#initial" border=0>
<map name="initial">
<area shape="rect" href="#" coords="100,0,125,25" onclick="document.image.src='imagetest.jpg'; ">
</map>
<map name="img1">
<area shape="rect" href="#" coords="0,0,25,25" onclick="document.image.src='image1bis.jpg'; ">
</map>
<map name="img2">
<area shape="rect" href="#" coords="175,0,200,25" onclick="document.image.src='image2bis.jpg'; ">
</map>
<map name="img3">
<area shape="rect" href="#" coords="0,125,25,150" onclick="document.image.src='image3bis.jpg'; ">
</map>
<a href=# onclick="document.image.src='image1.jpg'; document.image.usemap='#img1';">Lien 1</a>
<a href=# onclick="document.image.src='image2.jpg';
document.image.usemap='#img2'">Lien 2</a>
<a href=# onclick="document.image.src='image3.jpg'; document.image.usemap='#img3'">Lien 3</a>
</body>
</html> |
Mais visiblement html ne l’entent pas de cette oreille car ça ne fonctionne pas… à l’ouverture des images 1,2et 3 la zone réactive reste celle définie initialement…
Quelqu'un aurait-il une idée qui m’éviterait de créer une page par image (j’ai pas mal de liens…)
Simple problème de « vocabulaire » ou impossible en html ?
Merci de votre aide.
A+
Philippe
