Zoom Intéractif, ou zoom vignette par image pop up, en langage CSS :
dans le main
<script language="JavaScript">
function afficheMaxi(chemin)
{
//Déclaration des variables
var largeur = 0;
var hauteur = 0;
var Left = 0;
var Top = 0;
//Main
i1 = new Image();
i1.src = chemin;
largeur = i1.width;
hauteur = i1.height;
Left=(screen.width-largeur)/2;
Top=(screen.height-hauteur)/2;
html = '<HTML><HEAD><TITLE>Image jeunesse de Bottens</TITLE></HEAD><BODY LEFTMARGIN=0 MARGINWIDTH=0 TOPMARGIN=5 MARGINHEIGHT=0 body background="images/fond_zoom.jpg"><CENTER><IMG SRC="'+chemin+'" BORDER=0 NAME=imageTest onLoad="window.resizeTo(document.imageTest.width+24,document.imageTest.height+40)"></CENTER></BODY></HTML>';
popupImage = window.open('','_blank','toolbar=0,location=0,directories=0,menuBar=0,scrollbars=0,resizable=0, width=500, height=375, left=" +Left+ ", top=" +Top+ "');
popupImage.document.open()
popupImage.document.write(html);
popupImage.document.close()
}
</script>
dans le Body (pour 1 image)
<a href="java script:;" onclick="afficheMaxi('images/image_zoom.JPG')">
<img src="images/image_small.JPG" border=1 alt="Cliquer pour agrandir" width="150" height="112"></a>;