Position d'image

Résolu/Fermé
TOONIE - 17 nov. 2007 à 12:28
plwm Messages postés 2 Date d'inscription samedi 17 novembre 2007 Statut Membre Dernière intervention 18 novembre 2007 - 18 nov. 2007 à 22:31
Bonjour à tous,


Cette partie de script ci-dessous me permet d’afficher des vignettes sur une ligne et on click de faire apparaître en dessous l’image agrandie (tout en conservant la ligne de vignettes).

J’ai 3 questions : 1- Je souhaite espacer davantage la grande image des vignettes et je ne comprends pas bien où rajouter <p> </p>
2- par défaut, l’image s’affiche en dessous. Je voudrais qu’elle s’affiche en dessus, centrée, tout en conservant les vignettes en ligne, et je ne sais pas faire
3- si je voulais essayer de mettre les vignettes dans une colonne et afficher la grande image à droite, que faut-il changer dans ce script ?


<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
nb_photo_ligne = 7;
numero_photo = 1;

ejs_vignet = new Array;
ejs_des = new Array;
ejs_big = new Array;

var HazMess=new Array();
ejs_des[0]= 'bla bla 01'
ejs_vignet[0]= 'repertoire/vignette01'
ejs_big[0]= 'repertoire/grandeimage01'
ejs_des[1]= 'bla bla 01'
ejs_vignet[1]= 'repertoire/vignette01'
ejs_big[1]= 'repertoire/grandeimage01'

etc. pour les 5 autres images

function ChageImage(num)
{
if(document.getElementById)
document.getElementById("ejs_dyn_img").innerHTML = '<A HREF="javascript:killImage()"><IMG SRC="'+ejs_big[num]+'" border="1" width="340" height="295" ALT="Cliquez ici pour faire disparaitre"></A><BR><FONT FACE="Verdana, Arial" SIZE=1>'+ejs_des[num]+'</FONT>';
else
window.open(ejs_big[num],"_blank")
}

function killImage(num)
etc.


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]+'" border="1" width="80" height="55" ALT="Cliquer pour agrandir" 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>


Merci d’avance pour votre aide
A voir également:

3 réponses

plwm Messages postés 2 Date d'inscription samedi 17 novembre 2007 Statut Membre Dernière intervention 18 novembre 2007
17 nov. 2007 à 13:21
Bonjour,


1) Le mieux serait pour toi d'appliquer un style css direct dans les balises :

exemple :
<TD COLSPAN='+ejs_big.length+' style="text-align:center; padding:2px;">

padding:2px >> ça te permet de repousser de tant de pixel le border de a <td> de l'image qu'elle contient. Fait l'essai en changeant les 2px par 10px par exemple, et tu comprendras ce que je veux dire.

2) il faut que tu revois l'organisation de ta table (colonnes et rangs)

3) même chose que pour le 2)

Bon courage !
0
Bonjour plwm,


1) Merci, je ne savais vraiment pas comment faire.

2) et 3) J'ai fait différement avec les <tr> et des <td>, et j'ai maintenant bien l'image à droite, le texte à gauche.

Encore une fois merci de t'être intéressé à mon cas !

TOONIE
0
plwm Messages postés 2 Date d'inscription samedi 17 novembre 2007 Statut Membre Dernière intervention 18 novembre 2007
18 nov. 2007 à 22:31
Content que t'y sois parvenu.

plwm
0