Ouvrir des images avec des zones réactives

**filtep** · 22/01/2010, 12h31

Bonjour à tous,

je voudrai ouvrir des images différentes au même endroit sur la page, selon le lien clické, chaque image ayant une zone réactive propre. J'ai écrit ce bout de code, les images sont stockées dans le même répertoire que la page html et...
ça ne marche pas...

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>
 
<script language="javascript">
fonction changeimage (nomimage,x,y,a,b){
document.getElementById("smile").src = nomimage;
document.getElementById("smile").shape.area.coords = x,y,a,b;
}
</script>
 
</head>
 
<body>
 
<SCRIPT LANGUAGE="javascript">
var nomimage = "cabinet.jpg";
var x=100;
var y=0;
var a=125;
var b=25;
 
document.write('<IMG SRC=nomimage  width:200; height:150; ID=smile STYLE="position:absolute;top:100;left:100">');
</SCRIPT>
 
<a href="#"   onclick="changeimage(image1.jpg,0,0,25,25);">Afficher image 1</a>
<a href="#"   onclick="changeimage(image2.jpg,175,0,200,25);">Afficher image 2</a>
<a href="#"   onclick="changeimage(image3.jpg,0,125,0,150);">Afficher image 3</a>
 
</body>
</html>

Je suis néophyte et j'apprends, pouvez vous me dire ce qui cloche ?

Merci d'avance

A+
Philippe

**SpaceFrog** · 22/01/2010, 12h36

qui dit zone reactive dit map ...
il faut aussi changer le map

**filtep** · 22/01/2010, 12h43

Bonjour space frog,

Désolé pour la naïveté de mes questions mais je débute vraiment... je pensais que

document.getElementById("smile").shape.area.coords = x,y,a,b;

allait déterminer le MAP... quelle syntaxe dois-je utiliser ?

Code :

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

document.getElementById("smile").map.coords = x,y,a,b;

???

D'autre part mon code n'ouvre même pas les images (j'ai le petit logo "image inconnue"...)

A+
Philippe

**SpaceFrog** · 22/01/2010, 12h56

non le map est une balise à part...

dans la balise img c'est le usemap qu'il faudrait modifer

tu peux avoir les différentes balises map dans le code html et ne modifier que le usemap

**filtep** · 22/01/2010, 13h13

Alors ça ferait quelque chose comme:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
<head>
 
<script language="javascript">
fonction changeimage (nomimage,nommap){
document.getElementById("photo").src : nomimage;
document.getElementById("photo").usemap:nommap;
}
</script>
 
</head>
 
<body>
 
<map ID=initial>
 <area shape="rect"  href="#" coords="100,0,125,25"  onclick="document.image.src='image1bis.jpg';   ">
</map>
 
<map ID=mapimg1>
 <area shape="rect"  href="#" coords="0,0,25,25"  onclick="document.image.src='image1bis.jpg';   ">
</map>
 
<map ID=mapimg2>
 <area shape="rect"  href="#" coords="175,0,200,25"  onclick="document.image.src='image2bis.jpg';   ">
</map>
<map ID=mapimg3>
 <area shape="rect"  href="#" coords="0,125,25,150"  onclick="document.image.src='image3bis.jpg';   ">
</map>
 
 
<SCRIPT LANGUAGE="javascript">
var nomimage = "cabinet.jpg";
var nommap="initial";
 
document.write('<IMG SRC=nomimage;  usemap= nommap; width:200; height:150; ID=photo; STYLE="position:absolute;top:100;left:100;">');
</SCRIPT>
 
<a href="#"  nommap="img1" onclick="changeimage('image1.jpg','mapimg1');">Afficher image 1</a>
<a href="#"  nommap="img2" onclick="changeimage('image2.jpg','mapimg2');">Afficher image 2</a>
<a href="#"  nommap="img3" onclick="changeimage('image3.jpg','mapimg3');">Afficher image 3</a>
 
</body>
</html>

??

Pas mieux...
Je galère !!!

A+
Philippe

**Bovino** · 22/01/2010, 13h28

Un peu de rigueur dans la syntaxe sera peut-être utile

Code :

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

1
2
document.getElementById("photo").src = nomimage;
document.getElementById("photo").usemap = nommap;

Ouvrir des images avec des zones réactives

JavaScript

Vue hybride

Discussions similaires

Partager

Partager