11552 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai intégrer un script sur mon site où le principe est d'avoir une image miniature et de l'agrandir sur la même page quand on clique dessus. A la base, l'agrandissement se fait en dessous la photo miniature. J'ai réussi à faire en sorte que l'agrandissement soit à côté mais le problème c'est que c'est dans un tableau et j'ai besoin de faire un tableau dans le premier tableau javascript pour que l'agrandissement se fasse bien. Pouvez-vous m'aider ?

P.S : ci-dessous le script, vous comprendrez surement mieux ce que je veux dire. Merci

<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
/******
DEFINITION DES VARIABLE DU SCRIPT
******/
nb_photo_ligne = 5;
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]= 'test'
ejs_vignet[0]= '../images/fond_mini1.png '
ejs_big[0]= '../images/fond_gd.jpg '
ejs_des[1]= 'Commentaire photo 2'
ejs_vignet[1]= '../images/fond_mini1.png'
ejs_big[1]= '../images/fond_gd.jpg'
ejs_des[2]= 'commentaire photo 3'
ejs_vignet[2]= '../images/fond_mini1.png'
ejs_big[2]= '../images/fond_gd.jpg'
ejs_des[3]= 'test'
ejs_vignet[3]= '../images/fond_mini1.png '
ejs_big[3]= '../images/fond_gd.jpg '
ejs_des[4]= 'Commentaire photo 2'
ejs_vignet[4]= '../images/fond_mini1.png'
ejs_big[4]= '../images/fond_gd.jpg'
ejs_des[5]= 'commentaire photo 3'
ejs_vignet[5]= '../images/fond_mini1.png'
ejs_big[5]= '../images/fond_gd.jpg'
ejs_des[6]= 'commentaire photo 3'
ejs_vignet[6]= '../images/fond_mini1.png'
ejs_big[6]= '../images/fond_gd.jpg'
ejs_des[7]= 'commentaire photo 3'
ejs_vignet[7]= '../images/fond_mini1.png'
ejs_big[7]= '../images/fond_gd.jpg'
ejs_des[8]= 'commentaire photo 3'
ejs_vignet[8]= '../images/fond_mini1.png'
ejs_big[8]= '../images/fond_gd.jpg'
ejs_des[9]= 'commentaire photo 3'
ejs_vignet[9]= '../images/fond_mini1.png'
ejs_big[9]= '../images/fond_gd.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 Smiley num +'" BORDER=0 HSPACE=5 VSPACE=5 ALT="Cliquez ici pour faire disparaitre"></A><BR><FONT FACE="Verdana, Arial" SIZE=1>'
+ejs_des Smiley num +'</FONT>';
else
window.open(ejs_big Smiley 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 BORDER=1>')
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=15 ALT="Cliquez ici pour voir en grand" BORDER=0></A></TD>')

if(numero_photo == nb_photo_ligne)
{
document.write('');
numero_photo=0;
}
numero_photo++;
}
document.write('<TD COLSPAN='+ejs_big.length+' ALIGN=center><DIV ID=ejs_dyn_img></DIV></TD></TR></TABLE>');

</SCRIPT>