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;

**filtep** · 22/01/2010, 14h47

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

**SpaceFrog** · 22/01/2010, 14h57

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

**SpaceFrog** · 22/01/2010, 15h05

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

Code :

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

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 :

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

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

**filtep** · 22/01/2010, 16h58

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

)

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 :

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

A+
philippe

**filtep** · 22/01/2010, 17h05

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

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

**SpaceFrog** · 22/01/2010, 17h15

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

**filtep** · 22/01/2010, 17h29

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

**E.Bzz** · 22/01/2010, 17h49

Bonjour,

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 :

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

1
2
3
4
function swapPic(source, zonage){
	document.getElementById(source).src='image1.jpg'; 
	document.getElementById(source).usemap='#img1';
 }

A+

**E.Bzz** · 22/01/2010, 17h51

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

Code :

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

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

A+

**SpaceFrog** · 22/01/2010, 18h22

Code :

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

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 !

**filtep** · 23/01/2010, 13h11

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 :

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

**filtep** · 23/01/2010, 13h20

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

A+
Philippe

**filtep** · 23/01/2010, 16h52

Ca y est :

et sans fonction, seulement un peu de js dans les "onclick"

pour info:

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

**SpaceFrog** · 23/01/2010, 18h54

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

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

Ouvrir des images avec des zones réactives

JavaScript

Discussions similaires

Partager

Partager