Comment agrandir une photo en cliquant dessus

Marsh Posté le 02-05-2006 à 07:42:19

Bonjour,

Je crée actuellement un site, pour optimiser l'affichage et ne pas avoir 15Mo de photo par page, j'ai compressé entiérement toutes les photo et je les ai reduit a 400x300 .
Ce que je cherche a faire c'est quand je clique dessus, qu'elle s'affiche en 1600x1200 .... ou autre , mais comment faire simple ?
J'aurai bien pensé a crée une page HTML par photo ... mais quand il y a 400 photos sa fais du taf.

Cordialement

Nicolas

Reply

Marsh Posté le 02-05-2006 à 07:42:19

Reply

Marsh Posté le 02-05-2006 à 10:53:50

Trois solutions :

1.

2. Ou la solution ci-dessous, qui est celle que je recommande :

3. Ou pour l'affichage de la grande photo dans un popup :

</head>
<script language="JavaScript">
function display_photo(p_name,p_w,p_h,p_legend) {
if (self.innerWidth) {
winwidth = self.innerWidth;
winheight = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
winwidth = document.documentElement.clientWidth;
winheight = document.documentElement.clientHeight;
}
else if (document.body) {
winwidth = document.body.clientWidth;
winheight = document.body.clientHeight;
}
if (Number(p_w) < winwidth) winwidth = Number(p_w);
if (Number(p_h) < winheight) winheight = Number(p_h);
winwidth += 8; winheight += 40;
pwin=window.open("","","toolbar=0,location=0,directories=0,status=0,menubar=0,resizable=1,scrollbars=yes,copyhistory=0,width="+winwidth+",height="+winheight+",left=10,top=10" );
pwin.document.write("<html><head>" );
pwin.document.write("<title>Zoom</title>" );
pwin.document.write("<style type=text/css>" );
pwin.document.write("body {" );
pwin.document.write("margin:0;" );
pwin.document.write("padding:0;" );
pwin.document.write("color:white;" );
pwin.document.write("background-color:black; }" );
pwin.document.write("</style>" );
pwin.document.write("</head>" );
pwin.document.write("<body>" );
pwin.document.write("<img src="+p_name+" width="+p_w+" height="+p_h+">" );
pwin.document.write("<table noborder width=100%><tr>" );
pwin.document.write("<form><td align=left>"+p_legend+"</td>" );
pwin.document.write("<td align=right><input type='button' value='Fermer' onClick='window.close()'></td>" );
pwin.document.write("</tr></table></form>" );
pwin.document.write("</body></html>" );
}
</script>
</head>
...
<a href="javascript:display_photo('la_photo_grandetaille.jpg','1160','828','Une légende')">
<img src="la_photo_miniature.jpg">
</a>

Reply

Marsh Posté le 02-05-2006 à 18:41:01

Merci beaucoup, mais pour la 2eme solution, elle va s'afficher comment la photo ? dans une autre page ? dans la meme page ? car c'est un site avec un cadrea gauche avec les boutons du menu, donc j'aimerai savoir l'affichage ...

Car j'avais pensé a metre pour chaque photo une page HTML où dedans j'aurais inséré la photo a la taille normale puis j'aurai mis un lien sur la petite photo pour ouvrir la page HTML avec la photo.

Reply

Marsh Posté le 03-05-2006 à 13:23:18

petit UP

Reply

Marsh Posté le 03-05-2006 à 13:27:22

Salut

Bin essaye toi-même si tu veux savoir si la photo s'affiche ds une autre page ou non, ça prend 2 sec. :lol:
Ensuite, fais en fonction.
Je pense que ça affiche ds la même fenêtre.

Message édité par Roodie le 03-05-2006 à 13:28:33

Reply

Comment agrandir une photo en cliquant dessus

Sujets relatifs:

Leave a Replay