Comment agrandir une photo en cliquant dessus

Comment agrandir une photo en cliquant dessus - HTML/CSS - Programmation

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.

<a href="la_photo_grandetaille.jpg">
<img src="la_photo_grandetaille.jpg" width=15% height=15%>
</a>

 

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

<a href="la_photo_grandetaille.jpg">
<img src="la_photo_miniature.jpg">
</a>

 

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

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed