Plusieurs visionneuses, un script !?
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:
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:
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:
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.