Bonsoir,
Voilà, je désirerais pouvoir afficher des images miniatures dans un grand cadre situé juste au-dessus lorsqu'on clique sur ces miniatures. Je suis néophyte en langage javascript, je suis plus porté vers le css...
Mieux que de longues paroles, voici mon code jusqu'à présent:
<style type="text/css">
.arrondie-image {
border-radius: 11px 11px 0px 0px;
-moz-border-radius:11px 11px 0px 0px;
-webkit-border-radius:11px 11px 0px 0px;
border: 1px solid #11c1ed;
}
.arrondie-subimage {
border-radius: 0px 0px 7px 7px;
-moz-border-radius:0px 0px 7px 7px;
-webkit-border-radius: 0px 0px 7px 7px;
border: 1px solid #11c1ed;
}
#imageprincipale {
width: 350px;
box-shadow: 3px 3px 9px #333333;
-moz-box-shadow: 3px 3px 9px #333333;
-webkit-box-shadow: 3px 3px 9px #333333;
border-radius: 11px 11px 0px 0px;
-moz-border-radius:11px 11px 0px 0px;
-webkit-border-radius:11px 11px 0px 0px;
}
#imagesecondaire {
float: left;
box-shadow: 3px 3px 9px #333333;
-moz-box-shadow: 3px 3px 9px #333333;
-webkit-box-shadow: 3px 3px 9px #333333;
border-radius: 0px 0px 7px 7px;
-moz-border-radius:0px 0px 7px 7px;
-webkit-border-radius: 0px 0px 7px 7px;
}
</style>
<script language="javascript">function change_image(tthis){old=document.getElementById('imageprincipale').src; document.getElementById('imageprincipale').src=tthis.src;tthis.src=old;}</script>
</head>
<body>
<div id="imageprincipale"><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc.jpg" id="imageprincipale" class="arrondie-image" style="max-width: 350px;"></div>
<div id="imagesecondaire"><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc2.jpg" class="arrondie-subimage" style="max-height: 75px;" onclick="change_image(this)"></div>
<div id="imagesecondaire"><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc3.jpg" class="arrondie-subimage" style="max-height: 75px;" onclick="change_image(this)"></div>
<div id="imagesecondaire"><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc4.jpg" class="arrondie-subimage" style="max-height: 75px;" onclick="change_image(this)"></div>
</body>
Donc en gros il y a une grande image dans un grand cadre. Juste en dessous, il y a 3 cadres miniatures avec des images (alignés côte à côte). Mon but étant d'afficher en grand dans le grand cadre lorsque je clique sur l'une des 3 miniatures...
Je voudrais que cela ressemble un peu à ça: http://cgi.ebay.fr/Gigabyte-GeForce-GT-630-GV-N630-2GI-2048-Mo-DVI-HDMI-PCI-Express-NEUF-/331056678625?pt=FR_GH_Informatique_Composants_Cartes_Vid%C3%A9o&hash=item4d148406e1
Merci beaucoup d'avance.
PS: j'ai recherché en vain un peu partout sur le net...
Voilà, je désirerais pouvoir afficher des images miniatures dans un grand cadre situé juste au-dessus lorsqu'on clique sur ces miniatures. Je suis néophyte en langage javascript, je suis plus porté vers le css...
Mieux que de longues paroles, voici mon code jusqu'à présent:
<style type="text/css">
.arrondie-image {
border-radius: 11px 11px 0px 0px;
-moz-border-radius:11px 11px 0px 0px;
-webkit-border-radius:11px 11px 0px 0px;
border: 1px solid #11c1ed;
}
.arrondie-subimage {
border-radius: 0px 0px 7px 7px;
-moz-border-radius:0px 0px 7px 7px;
-webkit-border-radius: 0px 0px 7px 7px;
border: 1px solid #11c1ed;
}
#imageprincipale {
width: 350px;
box-shadow: 3px 3px 9px #333333;
-moz-box-shadow: 3px 3px 9px #333333;
-webkit-box-shadow: 3px 3px 9px #333333;
border-radius: 11px 11px 0px 0px;
-moz-border-radius:11px 11px 0px 0px;
-webkit-border-radius:11px 11px 0px 0px;
}
#imagesecondaire {
float: left;
box-shadow: 3px 3px 9px #333333;
-moz-box-shadow: 3px 3px 9px #333333;
-webkit-box-shadow: 3px 3px 9px #333333;
border-radius: 0px 0px 7px 7px;
-moz-border-radius:0px 0px 7px 7px;
-webkit-border-radius: 0px 0px 7px 7px;
}
</style>
<script language="javascript">function change_image(tthis){old=document.getElementById('imageprincipale').src; document.getElementById('imageprincipale').src=tthis.src;tthis.src=old;}</script>
</head>
<body>
<div id="imageprincipale"><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc.jpg" id="imageprincipale" class="arrondie-image" style="max-width: 350px;"></div>
<div id="imagesecondaire"><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc2.jpg" class="arrondie-subimage" style="max-height: 75px;" onclick="change_image(this)"></div>
<div id="imagesecondaire"><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc3.jpg" class="arrondie-subimage" style="max-height: 75px;" onclick="change_image(this)"></div>
<div id="imagesecondaire"><img src="Images/moulinex cookeo multicuiseur ce 7011 blanc4.jpg" class="arrondie-subimage" style="max-height: 75px;" onclick="change_image(this)"></div>
</body>
Donc en gros il y a une grande image dans un grand cadre. Juste en dessous, il y a 3 cadres miniatures avec des images (alignés côte à côte). Mon but étant d'afficher en grand dans le grand cadre lorsque je clique sur l'une des 3 miniatures...
Je voudrais que cela ressemble un peu à ça: http://cgi.ebay.fr/Gigabyte-GeForce-GT-630-GV-N630-2GI-2048-Mo-DVI-HDMI-PCI-Express-NEUF-/331056678625?pt=FR_GH_Informatique_Composants_Cartes_Vid%C3%A9o&hash=item4d148406e1
Merci beaucoup d'avance.
PS: j'ai recherché en vain un peu partout sur le net...