Comment agrandir une photo en cliquant dessus

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Comment agrandir une photo en cliquant dessus

nico91470

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

Publicité

olivthill

Trois solutions :

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>

nico91470

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.

nico91470

petit UP

Roodie

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

FORUM HardWare.fr

Programmation

HTML/CSS

Comment agrandir une photo en cliquant dessus

Sujets relatifs
Animation photo avec flash	associer un texte à une image dans une galerie photo
Charger une photo sur un autre site	Cherche exemple ArrayList, agrandir tableau dynamiquement
[DIVERS]Demande conseil pour création d'un espace membre et photo	[résolu] fichier quitter en cliquant sur un bouton
[CSS] Agrandir à la hauteur de l'écran	[PHP][resolu] prob pour l'ajout de photo
[RESOLU]Faire une gallerie de photo en HTML [SISI CA MARCHE] :)	Lien sur photo d'un diaporama...
Plus de sujets relatifs à : Comment agrandir une photo en cliquant dessus

Page générée en 0.041 secondes