Bonjour,
Je cherche à faire une présentation d'images comme pour un catalogue : sur la même page, je voudrais les vignettes qui présentent plusieurs faces du produit et à côté l'image agrandie..
J'ai trouvé un code en javascript mais je n'arrive pas à le customiser de manière à avoir les vignettes à gauche et qu'un silmple survol de la souris permette l'affiche de l'image en grand ...
je ne sais pas si je suis claire ???
Merci beaucoup !!!!!
voici le code :
Je cherche à faire une présentation d'images comme pour un catalogue : sur la même page, je voudrais les vignettes qui présentent plusieurs faces du produit et à côté l'image agrandie..
J'ai trouvé un code en javascript mais je n'arrive pas à le customiser de manière à avoir les vignettes à gauche et qu'un silmple survol de la souris permette l'affiche de l'image en grand ...
je ne sais pas si je suis claire ???
Merci beaucoup !!!!!
voici le code :
Bloc de code:
<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
/******
DEFINITION DES VARIABLE DU SCRIPT
******/
nb_photo_ligne = 3;
numero_photo = 1;
/******
ENREGISTREMENT DES PHOTOS
******/
ejs_vignet = new Array;
ejs_des = new Array;
ejs_big = new Array;
var HazMess=new Array();
ejs_des[0]= 'face'
ejs_vignet[0]= 'http://monsite/vignettes/v1.jpg'
ejs_big[0]= 'http://monsite/images/1.jpg'
ejs_des[1]= 'dos'
ejs_vignet[1]= 'http://monsite/vignettes/v2.jpg'
ejs_big[1]= 'http://monsite/images/2.jpg'
ejs_des[2]= 'detail'
ejs_vignet[2]= 'http://monsite/vignettes/v3.jpg'
ejs_big[2]= 'http://monsite/images/3.jpg'
/******
FONCTION POUR CHANGER LES PHOTOS
******/
function ChageImage(num)
{
if(document.getElementById)
document.getElementById("ejs_dyn_img").innerHTML = '<A HREF="javascript:killImage()"><IMG SRC="'+ejs_big[num]+'" BORDER=0 HSPACE=5 VSPACE=5 ></A><BR><FONT FACE="Verdana, Arial" SIZE=1>'+ejs_des[num]+'</FONT>';
else
window.open(ejs_big[num],"_blank")
}
/******
FONCTION POUR EFFACER LES PHOTOS
******/
function killImage(num)
{
if(document.getElementById)
document.getElementById("ejs_dyn_img").innerHTML = "";
}
/******
CREATION DU TABLEAU
******/
document.write('<TABLE>')
for(a=0;a<ejs_big.length;a++)
{
if(numero_photo == 1)
document.write('<TR>');
if(numero_photo == ejs_big.length)
document.write('<TD ALIGN=center COLSPAN='+(((ejs_big.length)+1)-numero_photo)+'>');
else
document.write('<TD ALIGN=center>');
document.write('<A HREF="javascript:ChageImage('+a+')"><IMG SRC="'+ejs_vignet[a]+'" HSPACE=5 VSPACE=5 ALT="Cliquez ici pour voir en grand" BORDER=0></A></TD>')
if(numero_photo == nb_photo_ligne)
{
document.write('</TR>');
numero_photo=0;
}
numero_photo++;
}
document.write('<TR><TD COLSPAN='+ejs_big.length+' ALIGN=center><DIV ID=ejs_dyn_img></DIV></TD></TR></TABLE>');
</SCRIPT>