Visionneuse d'images avec vignettes

agathe_web

Membre enregistré
6 Avril 2008
5
0
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 :
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>