<html>
<head>
<title></title>
<script type="text/javascript">
<!-- Debut
// JavaScript pris sur le site: "http://www.java.scripts-fr.com"
function ImageMax(chemin)
{
html = '<html> <head> <title>ImageMax</title> </head> <body onBlur="top.close()">
<IMG src="'+chemin+'" BORDER=0 NAME=ImageMax onLoad="window.resizeTo(document.ImageMax.width+10, document.ImageMax.height+30)">
</body></html>';
popupImage = window.open('','_blank','toolbar=0, location=0, directories=0, menuBar=0, scrollbars=0, resizable=1');
popupImage.document.open();
popupImage.document.write(html);
popupImage.document.close()
};
/*
Bon la, une grosse explication s'impose.
Après avoir ouvert la fonction, on va écrire le contenu HTML de notre pop-up dans une variables, ici html.
Vous noterez que dans le <body> j'ai rajouté onBlur="top.close()". cet événement (onBlur) avec la méthode close permet de fermer la fenêtre lorsque l'on clique à coté.
Ensuite on va y inscrire l'image. Son emplacement est écrit grace au paramètre chemin envoyé à la fonction. C'est ce paramètre qui permet de gerer plusieurs pop-up de plusieurs images. Attention aussi au nom de l'image car il est utilisé plus bas.
Au chargement de l'image, grâce à l'événement (onLoad), on va retailler la fênetre en utilisant la méthode resizeTo de l'objet window.
Pour savoir comment retailler la fenêtre, on va lire les propriété width et height de l'image (ici ImageMax est le nom de l'élement <img>). Donc avec des mot, document.ImageMax.width+10,document.ImageMax.height+30 veut dire : largeur+10 de l'image de ce document, hauteur+30 de l'image de ce document.
*/
// fin du script -->
</script>
</head>
<body>
<!-- Il ne reste plus qu'a mettre nos vignettes cliquable -->
<a href="#" onclick="ImageMax('images/image1-max.gif');">
<img src="images/image1.gif"></a>
<a href="#" onclick="ImageMax('images/image2-max.gif');">
<img src="images/image2.gif"></a>
<a href="#" onclick="ImageMax('images/image3-max.gif');">
<img src="images/image3.gif"></a>
</body>
</html>
| 
