Présentation du script
Exemples avec deux images de dimension différente
)
)
La première vignette va appeler une image qui fait ici 395x302. Dans ce premier exemple il n'existe sur le serveur qu'une seule image, avec pour la vignette une limitation de dimension par width="96" height="73". L'avantage qui semble acquis en ne plaçant qu'une image, risque de ne pas compenser le temps de chargement. En effet en ouvrant la page, le visiteur doit charger la totalité.
La deuxième vignette image du pont, est aux dimensions d'une vignette de96x72. Dans ce deuxième exemple il existe sur le serveur une image normale comme dans le premier exemple mais en plus une vignette indépendante, qui lorsqu'elle est cliquée provoque l'ouverture de la popup qui se dimensionne toujours aux valeurs de l'image cible, qui ici est de 640x480. A l'ouverture de la page il est seulement fait appel aux vignettes pour l'affichage.
Placer entre <HEAD> et </HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function PopupImage(img) {
titre="Agrandissement";
w=open("",'image','width=400,height=400,toolbar=no,scrollbars=no,resizable=no');
w.document.write("<HTML><HEAD><TITLE>"+titre+"</TITLE></HEAD>");
w.document.write("<SCRIPT language=javascript>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+10,document.images[0].height+30); window.focus();} else { setTimeout('checksize()',250) } }</"+"SCRIPT>");
w.document.write("<BODY onload='checksize()' onblur='window.close()' onclick='window.close()' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0>");
w.document.write("<TABLE width='100%' border='0' cellspacing='0' cellpadding='0' height='100%'><TR>");
w.document.write("<TD valign='middle' align='center'><IMG src='"+img+"' border=0 alt=' Image dans pop-up '>");
w.document.write("</TD></TR></TABLE>");
w.document.write("</BODY></HTML>");
w.document.close();
}
//-->
</SCRIPT>
Placer entre <BODY> et </BODY>
<a href="javascript:PopupImage('aimages/v389.gif')"><img
src="aimages/v389.gif" width="96"
height="73" class="image" alt="Cliquer pour agrandir"
border="0"></a>
<A href="javascript:PopupImage('aimages/v417.jpg')"><img
src="aimages/v417v.jpg" width="96"
height="72" class="image" alt="Cliquer pour agrandir"
border="0"></A>
Si vous cliquez ce lien, une nouvelle fenêtre de navigateur s'ouvrr qu'il suffit de refermer pour se retrouver ici-même. merci
