Images réactives en cascade

**filtep** · 21/01/2010, 16h44

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 :

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

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 :

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
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

**RomainVALERI** · 21/01/2010, 18h10

Pour faire référence à ta map, évite les syntaxes du type

Code js :

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

document.image.usemap

Il vaut mieux passer par un id sur ton élément <map>, et le récupérer avec un getElementById en JS.

**filtep** · 21/01/2010, 20h01

Merci pour cette réponse,

En pratique ce sont les balises MAP que je dois identifier par des Id ou bien l'image d'origine ?

je suis encore débutant, peux tu me donner un coup de main pour adapter mon code STP

Merci d'avance

A+
Philippe

Images réactives en cascade

HTML

Vue hybride

Discussions similaires

Partager

Partager