Plusieurs visionneuses, un script !?

**G33K69** · 28/09/2011, 10h30

Bonjour,

Alors je m'explique.

Je dois utiliser une carte d'une ville qui contient différents points.
Quand on clique sur l'un des points cela affiche sur la droite une div avec une visionneuse javascript.
Quand on change de point la div change et la visionneuse ne fonctionne plus.

Je joue avec display:none et display:block pour mes div

Il me faut donc une visionneuse par point, Mais il ni aura jamais deux visionneuses afficher en même temps.

Je voulais savoir, et je pense que c'est possible comment je pourrais réutiliser le même script de visionneuse sur tous les points.

Bon je vous met les bouts de code cela sera plus claire:

HTML:

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
 
		<div id="map">
			<div id="location01" class="location" onClick="afficher_cacher('detailLocation01')"></div>	
			<div id="location02" class="location" onClick="afficher_cacher('detailLocation02')"></div>	
		</div>
		<div id="detail">
			<div id="detailLocation01" style="display:none;">
				<div id="galerie">
					<ul id="galerie_mini">
						<li><a href="pictures/CIMG4097.resized.jpg" title="Title">
						<img src="pictures/mini/CIMG4097m.jpg" alt="Title" /></a></li>
						<li><a href="pictures/CIMG4085.resized.jpg" title="Title">
						<img src="pictures/mini/CIMG4085m.jpg" alt="Title" /></a></li>
					</ul>
					<dl id="photo">
						<dt>Title</dt>
						<dd><img id="big_pict" src="pictures/CIMG4097.resized.jpg" alt="Photo normal size" />texte</dd>
					</dl>
				</div>	
			</div>
			<div id="detailLocation02" style="display:none;">
				<div id="galerie">
					<ul id="galerie_mini">
						<li><a href="pictures/CIMG4088.resized.jpg" title="Title">
						<img src="pictures/mini/CIMG4097m.jpg" alt="Title" /></a></li>
						<li><a href="pictures/CIMG4091.resized.jpg" title="Title">
						<img src="pictures/mini/CIMG4085m.jpg" alt="Title" /></a></li>
					</ul>
					<dl id="photo">
						<dt>Title</dt>
						<dd><img id="big_pict" src="pictures/CIMG4097.resized.jpg" alt="Photo normal size" />texte</dd>
					</dl>
				</div>	
			</div>
		</div>

CSS:

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
 
body {
	text-align:center;
	font-family:"Trebuchet ms",Arial,Helvetica,sans-serif;
	font-size:.9em;
	background:#FFFFFF;
	width:2000px;
}
 
h1,h2 {
	margin:0px;
	text-align:left;
	font-size:1.2em;
	color:#444;
}
h2 {
	color:#666;
	font-size:1em;
}
 
a img {border: none;}
 
#banniere{
width:2000px;
height:231px;
background:url(structure/banniere.jpg);
}
 
/* CSS MAP */
#map {
	float:left;
	border-style:solid;
	border-width:3px;
	border-color:#c1252a;
	padding:5px;
	position:relative;
	width:1130px;
	height:886px;
	background:url(structure/CentroSpoleto.jpg) no-repeat center;
	margin-left:51px;
}
 
	#map .location {
		display:block;
		position:absolute;
		width:10px;
		height:10px;
		outline:none;
		z-index:10;
		text-decoration:none;
		cursor:pointer;
	}
 
	/* START OF CSS FOR MAP POINTS */
	#map #location01 {
		top:89px;
		left:450px;
	}
	#map #location02 {
		top:67px;
		left:979px;
	}
 
/****CSS detail ***/
#detail{
float:left;
border-style:solid;
border-width:3px;
border-color:#c1252a;
padding:5px;
margin-left:20px;
width:724px;
min-height:886px;
text-align:left;
}
 
	#detail p.text{
		padding:2px;
		margin:auto;
		text-align:center;
	}
 
.clear {
	clear: both;
}
 
/***** CSS galerie ****/
 
div#galerie{
float:left;
width: 724px;
text-align: center ;
font: 0.9em Georgia, serif ;
}
 
ul#galerie_mini{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}
 
ul#galerie_mini li{
float: left ;
}
 
ul#galerie_mini li a img{
margin: 2px 1px ;
}
 
dl#photo{
clear: both ;
margin: 0 auto ;
}
 
dl#photo dt{
font: italic 2.5em/1.5em Georgia, serif ;
color: #FFFFFFF ;
}
 
dl#photo dd{
margin: 0 ;
}

Et enfin Javascript:

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
 
// Execution des scripts au chargement de la page
window.onload = function() {
displayPics();
afficher_cacher();
}
//function for galerie
function displayPics()
{
	var photos = document.getElementById('galerie_mini') ;
	// On récupère l'élément ayant pour id galerie_mini
	var liens = photos.getElementsByTagName('a') ;
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var big_photo = document.getElementById('big_pict') ;
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
 
	var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
	// Et enfin le titre de la photo de taille normale
 
	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	for (var i = 0 ; i < liens.length ; ++i) {
		// Au clique sur ces liens 
		liens[i].onclick = function() {
			big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			big_photo.alt = this.title; // On change son titre
			titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
			return false; // Et pour finir on inhibe l'action réelle du lien
		};
	}
}
 
function afficher_cacher(id)
{
	var nomId = id;
	switch (nomId)
	{
	case 'detailLocation01':
	  document.getElementById('detailLocation01').style.display="block";
	  document.getElementById('detailLocation02').style.display="none";
	  break;
	case 'detailLocation02':
		document.getElementById('detailLocation01').style.display="none";
		document.getElementById('detailLocation02').style.display="block";
	  break;
	default:
	  document.getElementById('detailLocation01').style.display="none";
	  document.getElementById('detailLocation02').style.display="none"; 
	}
}

Si vous avez toute autres remarques à faire par rapport a l'optimisation du code n'hésitez pas, je suis preneur.

Merci d'avance pour toute aide.

**Vil'Coyote** · 28/09/2011, 13h32

Je voulais savoir, et je pense que c'est possible comment je pourrais réutiliser le même script de visionneuse sur tous les points.

sans fouillé dans ton code. je répondrais que cela serait possible en passant des paramètres supplémentaire dans tes fonction de visionneuse. ceci afin de savoir quelle visionneuse est appelé et ainsi d'effectuer des action en fonction de cette dernière.

**G33K69** · 30/09/2011, 14h07

Tout d'abord, Merci pour ta reponse.

J'essayerai ce WE, mais pour l'instant je ne peux pas.

Cela dit les actions restent les meme quelque soit la visionneuse. Mais peut être que comme ceci le script ce rechargera.

Je te tiens au courant

**G33K69** · 03/10/2011, 09h40

Bonjour,

Alors j'ai pu me remettre un peu dans mon code. Le souci c'est que je ne fait pas appel a la fonction.
Elle se charge au chargement de la page.

J'ai modifier mon code en la relançant a chaque fois que j'affiche la "zone visionneuse" (ou div="detailLocation0X" dans mon code. Mais cela est pareil.
La visionneuse ne fonctionne que sur la div "detailLocation01". Sur les autres detailLocation0x quand je clique sur la miniature il ne me l'affiche pas en grand dans la visionneuse mais charge la photo dans une page blanche "comme un lien normal".

Je n'ai mofifier que le js. En voici donc les modif:

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
 
// Execution des scripts au chargement de la page
window.onload = function() {
afficher_cacher();
}
function afficher_cacher(id)
{
	var nomId = id;
	switch (nomId)
	{
	case 'detailLocation01':
		document.getElementById('detailLocation01').style.display="block";
		document.getElementById('detailLocation02').style.display="none";
		displayPics();
		break;
	case 'detailLocation02':
		document.getElementById('detailLocation01').style.display="none";
		document.getElementById('detailLocation02').style.display="block";
		displayPics();
		break;
	default:
		document.getElementById('detailLocation01').style.display="none";
		document.getElementById('detailLocation02').style.display="none"; 
	}
}
//function for galerie
function displayPics()
{
	alert("test");
	var photos = document.getElementById('galerie_mini') ;
	// On récupère l'élément ayant pour id galerie_mini
	alert("test1");
	var liens = photos.getElementsByTagName('a') ;
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var big_photo = document.getElementById('big_pict') ;
	alert("test2");
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
	var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
	alert("test3");
	// Et enfin le titre de la photo de taille normale
	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	for (var i = 0 ; i < liens.length ; ++i) {
		alert("test4");
		// Au clique sur ces liens 
		liens[i].onclick = function() {
			alert("test5");
			big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			big_photo.alt = this.title; // On change son titre
			titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
			return false; // Et pour finir on inhibe l'action réelle du lien
		};
	}
}

Bon alors lors de l'execution dans "detailLocation01" ca ne pose pas de problème. Les alerts s'affiche tout comme il faut. Cependant quand c'est dans "detailLocation02" les alert s'affiche comme il faut jusqu'au "test4" mais pas le test 5.

C'est au niveau du lien que ca foire. Il prends le lien normalement et non pas comme un lien a traiter dans la visionneuse

Merci pour toute nouvelle aide.

**headmax** · 05/10/2011, 21h35

Salut essaye comme ça :

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
<script type="text/javascript">
//Execution des scripts au chargement de la page
window.onload = function() {
};
 
function afficher_cacher(ids){
 
	ids.style.display="block";
	switch(ids.id){
	case 'location01' :
		document.getElementById('detailLocation01').style.display = 'block';
		document.getElementById('detailLocation02').style.display="none";
		break;
	case 'location02' :
		document.getElementById('detailLocation02').style.display = 'block';
		document.getElementById('detailLocation01').style.display="none";
		break;
	default :
		document.getElementById('detailLocation01').style.display="none";
		document.getElementById('detailLocation02').style.display="none"; 
 
	}
 
};
//function for galerie
function displayPics(obj){
	alert("test");
	var photos = document.getElementById('galerie_mini') ;
	// On récupère l'élément ayant pour id galerie_mini
	alert("test1");
	var liens = photos.getElementsByTagName('a') ;
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var big_photo = document.getElementById('big_pict') ;
	alert("test2");
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
	var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
	alert("test3");
	// Et enfin le titre de la photo de taille normale
	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
 
		alert("test4");
		// Au clique sur ces liens 
		obj.onclick = function() {
			alert(this.id);
			big_photo.style.backgroundImage = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			big_photo.alt = this.title; // On change son titre
			titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
			return false; // Et pour finir on inhibe l'action réelle du lien
		};
};
</script>
</head>
<body>
		<div id="map">
			<div id="location01" class="location" onClick="afficher_cacher(this);displayPics(this);"></div>	
			<div id="location02" class="location" onClick="afficher_cacher(this);displayPics(this);"></div>	
		</div>
		<div id="detail">
			<div id="detailLocation01" style="display:none;">
				<div id="galerie">
					<ul id="galerie_mini">
						<li><a href="img/btn1/button_1.png" title="Title">
						<img src="img/btn1/button_1.png" alt="Title" /></a></li>
						<li><a href="img/btn1/button_1.png" title="Title">
						<img src="img/btn1/button_1.png" alt="Title" /></a></li>
					</ul>
					<dl id="photo">
						<dt>Lien1</dt>
						<dd><img id="big_pict" src="img/btn1/button_1.png" alt="Photo normal size" />texte</dd>
					</dl>
				</div>	
			</div>
			<div id="detailLocation02" style="display:none;">
				<div id="galerie">
					<ul id="galerie_mini">
						<li><a href="img/btn2/calque_1.png" title="Title">
						<img src="img/btn2/calque_1.png" alt="Title" /></a></li>
						<li><a href="img/btn2/calque_1.png" title="Title">
						<img src="img/btn2/calque_1.png" alt="Title" /></a></li>
					</ul>
					<dl id="photo">
						<dt>Lien2</dt>
						<dd><img id="big_pict" src="img/btn2/calque_1.png" alt="Photo normal size" />texte</dd>
					</dl>
				</div>	
			</div>
		</div>
</body>
</html>

**G33K69** · 06/10/2011, 11h46

Bonjour,

Merci pour cette réponse mais cela ne change rien, même la première visionneuse ne fonctionne pas.
Quand on clique sur l'image miniature ca envoi directement dans une nouvelle fenêtre avec seulement l'image d'afficher, comme le ferait un simple lien.

Alors pour l'instant mon code en est ici
html:

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
55
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Mappa di Spoleto</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 0.19.1" />
	 <link rel="stylesheet" type="text/css" href="carte.css">
	 <script type="text/javascript" src="fonctions.js"></script>
</head>
 
<body>
<div id="banniere"></div>
	<div id="contenant">
		<div id="map">
			<div id="location01" class="location" onClick="afficher_cacher('detailLocation01'); displayPics();"></div>	
			<div id="location02" class="location" onClick="afficher_cacher('detailLocation02'); displayPics();"></div>	
		</div>
		<div id="detail">
			<div id="detailLocation01" style="display:none;">
				<div id="galerie">
					<ul id="galerie_mini">
						<li><a href="http://nsa28.casimages.com/img/2011/10/06/111006124103115053.jpg" title="Title photo1">
						<img src="http://nsa27.casimages.com/img/2011/10/06/111006124349380229.jpg" alt="Title" /></a></li>
						<li><a href="http://nsa27.casimages.com/img/2011/10/06/111006124828856429.jpg" title="Title photo2">
						<img src="http://nsa28.casimages.com/img/2011/10/06/111006124730688533.jpg" alt="Title" /></a></li>
					</ul>
					<dl id="photo">
						<dt>Title</dt>
						<dd><img id="big_pict" src="http://nsa28.casimages.com/img/2011/10/06/111006124103115053.jpg" alt="Photo normal size" />texte</dd>
					</dl>
				</div>	
			</div>
			<div id="detailLocation02" style="display:none;">
				<div id="galerie">
					<ul id="galerie_mini">
						<li><a href="http://nsa28.casimages.com/img/2011/10/06/111006124943657923.jpg" title="Title photo1">
						<img src="http://nsa28.casimages.com/img/2011/10/06/111006125100878354.jpg" alt="Title" /></a></li>
						<li><a href="http://nsa28.casimages.com/img/2011/10/06/111006125251112751.jpg" title="Title photo2">
						<img src="http://nsa27.casimages.com/img/2011/10/06/111006125151313945.jpg" alt="Title" /></a></li>
					</ul>
					<dl id="photo">
						<dt>Title</dt>
						<dd><img id="big_pict" src="http://nsa28.casimages.com/img/2011/10/06/111006124943657923.jpg" alt="Photo normal size" />texte</dd>
					</dl>
				</div>	
			</div>
		</div>
		<div class="clear"></div>
	</div>
</body>
</html>

javascript:

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
 
// Execution des scripts au chargement de la page
window.onload = function() {
afficher_cacher();
}
function afficher_cacher(id)
{
	var nomId = id;
	switch (nomId)
	{
	case 'detailLocation01':
		document.getElementById('detailLocation01').style.display="block";
		document.getElementById('detailLocation02').style.display="none";
		break;
	case 'detailLocation02':
		document.getElementById('detailLocation01').style.display="none";
		document.getElementById('detailLocation02').style.display="block";
		break;
	default:
		document.getElementById('detailLocation01').style.display="none";
		document.getElementById('detailLocation02').style.display="none"; 
 
	}
}
//function for galerie
function displayPics()
{
	var photos = document.getElementById('galerie_mini') ;
	// On récupère l'élément ayant pour id galerie_mini
	var liens = photos.getElementsByTagName('a') ;
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var big_photo = document.getElementById('big_pict') ;
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
	var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
	// Et enfin le titre de la photo de taille normale
	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	alert("debut for avec nombre de liens" + liens.length);
	for (var i = 0 ; i < liens.length ; ++i) {
		// Au clique sur ces liens 
		liens[i].onclick = function() {
			alert("debut onclick");
			big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			big_photo.alt = this.title; // On change son titre
			titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
			alert("fin onclick");
			return false; // Et pour finir on inhibe l'action réelle du lien
		}
	alert("fin for"+ i);
	}
}

Pour plus de facilité de compréhension j'ai préciser mes alerts et aussi j'ai uploader les photos pour que vous n'ayez pas a vous embêter à mettre les votre.

Pour moi le probleme ce situe dans la boucle for.
Je continue mes recherches.

Merci

**G33K69** · 07/10/2011, 11h32

Bon, je n'ai pas résolu mon problème mais je l'ai détourné avec jQuery.

Plusieurs visionneuses, un script !?

JavaScript

Discussions similaires

Partager

Partager