Ouvrir des images avec des zones réactives

Version imprimable

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:

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

22/01/2010, 12h36
SpaceFrog

qui dit zone reactive dit map ...
il faut aussi changer le map
22/01/2010, 12h43
filtep

Bonjour space frog,

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

Citation:

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

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

Code:

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
22/01/2010, 12h56
SpaceFrog

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

Alors ça ferait quelque chose comme:

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

Un peu de rigueur dans la syntaxe sera peut-être utile ;)
Code:

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

22/01/2010, 14h47
filtep

Bonjour Bovino,

merci pour cette observation (on s'y perd un peu quand on débute entre la syntaxe en CSS et en Javascript...)

J'ai corrigé, ça ne marche toujours pas, avant même de comprendre ce qui dysfonctionne dans ma fonction, pourquoi même la première image ne s'affiche-t-elle pas?
Encore un problème de syntaxe ?

A+
Philippe

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
<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'; return false  ;">
</map>
 
<map ID="mapimg1">
 <area shape="rect"  href="#" coords="0,0,25,25"  onclick="document.image.src='image1bis.jpg'; return false  ;  ">
</map>
 
<map ID="mapimg2">
 <area shape="rect"  href="#" coords="175,0,200,25"  onclick="document.image.src='image2bis.jpg'; return false  ;  ">
</map>
<map ID="mapimg3">
 <area shape="rect"  href="#" coords="0,125,25,150"  onclick="document.image.src='image3bis.jpg';return false  ;   ">
</map>
 
var nomimage = "cabinet.jpg";
var nommap="initial";
 
<IMG SRC="cabinet.jpg"  usemap="initial"; style="width:200px; height=150px;position:absolute;top:100;left:100;" ID="photo"; />
 
 
<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>

en fait ton souci se situait sur la concaténation de ton document.write
Code:

1 2 3 4 5 6 7 <SCRIPT LANGUAGE="javascript"> var nomimage = "cabinet.jpg"; document.write('<IMG SRC="'+nomimage+'" width="200" height="150" id="smile" style="position:absolute;top:100;left:100" />'); </SCRIPT>
js ne reconnait pas les variables dans un string il faut les concatener

de plus ta syntaxe de balise image est mal balancée

Code:

<img src="..." id=" .. " style=" ...." alt="..." title=" ..." />

Bien...

alors j'ai fait les modifications que tu m'as indiquées, j'ai aussi rajouté des # avant le nom des usemap pour que ça marche, j'ai remplacé "fOnction" par fUnction (ça marche mieux :mrgreen:)

le click sur les liens affiche bien les images mais la zone réactive reste la même que sur l'image initiale...

Même problème que ce que j'avais fait en html et qui ne semblait pas prendre en compte le "document.image.usemap='#img3'" " dans la balise <a>

Pour info:
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 <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='THEPOT.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>
C'est pour celà que je voulais le faire en javascript...:(
Je suis pourtant certain qu'il doit y avoir un moyen ...
Si tu (vous) as (avez) d'autres idées, je suis preneur.:P

A+
philippe

Oups, J'ai oublié le code de "ou j'en suis":

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
<html>
<head>
 
<script language="javascript">
function changeimage (nomimage,nommap){
document.getElementById("photo").src = nomimage;
document.getElementById("photo").usemap=nommap;
}
</script>
 
</head>
 
<body>
 
<map name="initial";id="initial">
 <area shape="rect"  href="#" coords="100,0,125,25"  onclick="document.image.src='image1bis.jpg'; return false  ;">
</map>
 
<map ID="mapimg1">
 <area shape="rect"  href="#" coords="0,0,25,25"  onclick="document.image.src='image1bis.jpg'; return false  ;  ">
</map>
 
<map ID="mapimg2">
 <area shape="rect"  href="#" coords="175,0,200,25"  onclick="document.image.src='image2bis.jpg'; return false  ;  ">
</map>
<map ID="mapimg3">
 <area shape="rect"  href="#" coords="0,125,25,150"  onclick="document.image.src='image3bis.jpg';return false  ;   ">
</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>

A+
Philippe

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
<html>
<head>
</head>
<script type="text/javascript" />
function swapPic(source, zonage){
	document.getElementById('source').src='image1.jpg'; 
	document.getElementById('source').usemap='#img1';
 }
 
</script>
<body>
 
<IMG id="monimage" src="cabinet.jpg"  usemap="#initial"  border=0>
 
<map name="initial">
 <area shape="rect"  href="#" coords="100,0,125,25"  onclick="swapPic('image1.jpg','#img1');return false;  ">
</map>
 
<map name="img1">
 <area shape="rect"  href="#" coords="0,0,25,25"  onclick="swapPic('image2.jpg','#img2');return false;    ">
</map>
 
<map name="img2">
 <area shape="rect"  href="#" coords="175,0,200,25"  onclick="swapPic('image3.jpg','#img3');return false;   ">
</map>
<map name="img3">
 <area shape="rect"  href="#" coords="0,125,25,150"  onclick="swapPic('cabinet.jpg','#initial');return false;   ">
</map>
 
<a href=# onclick="swapPic('image1.jpg','#img1');return false;">Lien 1</a>
<a href=# onclick="swapPic('image2.jpg','#img2');return false;">Lien 2</a>
<a href=# onclick="swapPic('image3.jpg','#img3');return false;">Lien 3</a>
 
</body>
 
</html>

22/01/2010, 17h29
filtep

Merci pour cette réponse, je vais étudier "swapPic"

mais les images ne s'ouvrent pas au click sur les liens...
Désolé d'être lourd...

A+
Philippe
22/01/2010, 17h49
E.Bzz
Bonjour,

Citation:

Envoyé par filtep

mais les images ne s'ouvrent pas au click sur les liens...

il me semble que les quottes sont en trop autour de source.
Avec les quottes ce n'est pas le paramètre qui est pris en compte, mais la chaîne "source" qui ne correspond à rien ici ;)

Essaye
Code:

1 2 3 4 function swapPic(source, zonage){ document.getElementById(source).src='image1.jpg'; document.getElementById(source).usemap='#img1'; }
A+
22/01/2010, 17h51
E.Bzz

... et je suppose que le paramètre zonage était prévu pour remplacer "#img1" :

Code:

document.getElementById('source').usemap=zonage;

A+

Code:

1 2 3 4 function swapPic(source, zonage){ document.getElementById('monimage').src=source; document.getElementById('monimage').usemap=zonage; }
desole codé trop vite avant de quitter le bureau..

pfiou c'est dur cette fin de semaine !

Bonjour,

bon visiblement le changement des coordonnées de MAP posent quelques problèmes... J'ai donc décidé de contourner les choses en superposant mas images et en jouant sur leur visibilité... Cà ça devrait marcher!
Sauf que je galère encore avec mon code, ça ne doit pas être grand chose mais j'ai besoin d'un coup de main +++ SVP

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
48
49
50
51
52
53
54
<html>
<head>
 
<script language="javascript"
function changimage(nomimage){
document.getElementById('nomimage').style.visibility="visible"; 
 
</script>
 
</head>
 
<body>
 
<script language="javascript">
var nomimage="cab";
document.write('<IMG id="'+nomimage+'" style="position:absolute; TOP:50px; LEFT:100px; WIDTH:200px; HEIGHT:150px;visibility:visible" />');
</script>
 
<map id= initial name="initial">
 <area shape="rect"  href="#" coords="100,0,125,25"  onclick="swapPic('image1.jpg','#img1');return false;  ">
</map>
 
<map name="img1">
 <area shape="rect"  href="#" coords="0,0,25,25"  onclick="swapPic('image2.jpg','#img2');return false;    ">
</map>
 
<map name="img2">
 <area shape="rect"  href="#" coords="175,0,200,25"  onclick="swapPic('image3.jpg','#img3');return false;   ">
</map>
 
<map name="img3">
 <area shape="rect"  href="#" coords="0,125,25,150"  onclick="swapPic('cabinet.jpg','#initial');return false;   ">
</map>
 
 
      <IMG id= cab src="cabinet.jpg" border=0 usemap="#initial" 
     STYLE="position:absolute; TOP:50px; LEFT:100px; WIDTH:200px; HEIGHT:150px; visibility:visible">
 
      <IMG id= im1 src="image1.jpg" border=0 usemap="#img1"
     STYLE="position:absolute; TOP:50px; LEFT:100px; WIDTH:200px; HEIGHT:150px; visibility:hidden" >
 
     <IMG id= im2 src="image2.jpg" border=0 usemap="#img2" 
     STYLE="position:absolute; TOP:50px; LEFT:100px; WIDTH:200px; HEIGHT:150px; visibility:hidden" >
 
     <IMG id= im3 src="image3.jpg" border=0 usemap="#img3" 
     STYLE="position:absolute; TOP:50px; LEFT:100px; WIDTH:200px; HEIGHT:150px; visibility:hidden">
 
 
     <a href="#" onclick="changimage(im1)">Voir Image 1</a>
     <a href="#" onclick="changimage(im2)">Voir Image 2</a>
     <a href="#" onclick="changimage(im3)">Voir Image 3</a>
 
</body>
</html>

Merci d'avance

A+
Philippe

23/01/2010, 13h20
filtep

oups, j'ai oublié le "}" à la fin de la fonction, mais même corrigé ça ne fonctionne pas... :cry::cry::cry:

A+
Philippe

Ca y est ::ccool:
et sans fonction, seulement un peu de js dans les "onclick"

pour info:

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
<html>
<head>
</head>
<body>
 
<map name="initial">
 <area shape="rect"  href="#" coords="100,0,125,25"  onclick="#">
</map>
 
<map name="img1">
 <area shape="rect"  href="#" coords="0,0,25,25"  onclick="#">
</map>
 
<map name="img2">
 <area shape="rect"  href="#" coords="175,0,200,25"  onclick="#">
</map>
<map name="img3">
 <area shape="rect"  href="#" coords="0,125,25,150"  onclick="#">
</map>
 
<img  name="cab"  src="cabinet.jpg" usemap="#initial" style="position:absolute; top: 100px;left: 100px;visibility:visible;" />
<img  name="im1"  src="image1.jpg"  usemap="#img1" style="position:absolute; top: 100px;left: 100px;visibility:hidden;" />
<img  name="im2"  src="image2.jpg"  usemap="#img2" style="position:absolute; top: 100px;left: 100px;visibility:hidden;" />
<img  name="im3"  src="image3.jpg"  usemap="#img3" style="position:absolute; top: 100px;left: 100px;visibility:hidden;" />
 
 
 
<br>
<a href="#"  onclick="document.cab.style.visibility='hidden'
                      document.im1.style.visibility='visible'
                      document.im2.style.visibility='hidden'
                      document.im3.style.visibility='hidden';">Voir Image 1</a>
<br>
<a href="#"  onclick="document.cab.style.visibility='hidden'
                      document.im1.style.visibility='hidden'
                      document.im2.style.visibility='visible'
                      document.im3.style.visibility='hidden';">Voir Image 2</a>
<br>
<a href="#"  onclick="document.cab.style.visibility='visible'
                      document.im1.style.visibility='hidden'
                      document.im2.style.visibility='hidden'
                      document.im3.style.visibility='visible';">Voir image 3</a>
</body>
</html>

Merci de votre aide à tous.

A+
Philippe

1 pièce(s) jointe(s)

Je confirme que l'on peut changer le useMap et faire un code un peu plus esthétique:

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
</head>
<body>
<map name="one">
<area href="javascript:alert('Red')" shape="rect" coords="0, 0, 100, 100">
</map>
<map name="two">
<area href="javascript:alert('Green')" shape="rect" coords="100, 0, 200, 100">
</map>
<map name="three">
<area href="javascript:alert('Blue')" shape="rect" coords="0, 100, 100, 200">
</map>
<map name="four">
<area href="javascript:alert('Yellow')" shape="rect" coords="100, 100, 200, 200"></map>
<img src="images/quarts.png" useMap="#one" width="200" height="200" id="foo"/><br/>
<input type="button" onclick="document.getElementById('foo').useMap='#two'" value="vert" />
<input type="button" onclick="document.getElementById('foo').useMap='#three'" value="bleu" />
<input type="button" onclick="document.getElementById('foo').useMap='#four'" value="jaune" />
<input type="button" onclick="document.getElementById('foo').useMap='#one'" value="rouge" />
</body>
</html>

l'image joint à mettre dasn un repertoire nommé "images"

4 pièce(s) jointe(s)

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>