|
L'objet window de Javascript
propose une méthode permettant de très simplement
d'ouvrir une fenêtre popup avec du contenu HTML ou non: window.open().
Beaucoup plus puissante qu'un simple target="_blank"
dans un lien HTML, window.open()
permet de contrôler de nombreux aspects de la fenêtre
ouverte: sa position, sa taille, ses barres de défilement,
ses boutons... Malgré cela, cette méthode ne dispose
pas d'arguments pour adapter automatiquement sa taille à
son contenu. C'est le but d'une autre méthode, window.resizeTo(),
que nous allons utiliser ici.
resizeTo() ne pouvant s'appliquer
qu'à la fenêtre en cours d'utilisation, nous aller
créer une fonction Javascript qui ouvrira une fenêtre
avec la méthode open() et
y écrira le code de la page HTML affichant notre image de
manière dynamique, cette page HTML ayant dans sa balise <body>
un évènement onLoad()
qui déclenchera la méthode resizeTo()
que l'on aura déclaré au sein de ce HTML.
Pour clarifier,
procédons ainsi: nous avons besoin que la fenêtre qui
contient notre image s'adapte automatiquement à la taille
de l'image. Nous devons donc créer une fonction Javascript
faisant appel à resizeTo(),
cette fonction se trouvant entre les balises <head>
de la page HTML contenant notre image. Notre fonction Javascript
sera déclenchée par l'évènement onLoad
de la balise <body>, de sorte
que notre fonction ne sera appellée que lorsque l'ensemble
de la page sera chargée. Voici le script en question:
<script language='JavaScript'>
<!--
IE5=NN4=NN6=false
if (document.all)
IE5=true;
else if (document.getElementById)
NN6=true;
else if (document.layers)
NN4=true;
function autoSize()
{
if (IE5) self.resizeTo(document.images[0].width+10,
document.images[0].height+31);
else if (NN6) self.sizeToContent();
else window.resizeTo(document.images[0].width,
document.images[0].height+20);
self.focus()
}
-->
</script>
Comme de bien
entendu, chaque navigateur gère les fenêtres d'une
manière différente, il nous faut donc tester d'entrée
de jeu si certains objets ou méthodes existent afin d'envoyer
au navigateur le code qui lui correspond. Par exemple, s'il se trouve
que le script a affaire à Netscape 6, il utilisera la méthode
spécifique sizeToContent(),
plutôt que resizeTo()... Dans
les autres cas, des valeurs sont ajoutées aux tailles afin
prendre en compte les interfaces de chaque navigateur.
Maintenant que
nous connaissons le contenu de notre page HTML se trouvant dans
notre fenêtre pop-up, nous devons créer cette fenêtre
pop-up, y placer dynamiquement le contenu HTML, à l'aide
de la méthode document.write().
Voici donc notre
code en entier:
(fichier resizepopup.htm)
<script language="JavaScript">
<!--
function resizePopUp(monImage, monTitre)
{
w = window.open('','chargement','width=10,height=10');
w.document.write( "<html><head><title>"+monTitre+"</title>\n"
);
w.document.write( "<script language='JavaScript'>\n");
w.document.write( "IE5=NN4=NN6=false;\n");
w.document.write( "if(document.all)IE5=true;\n");
w.document.write( "else if(document.getElementById)NN6=true;\n");
w.document.write( "else if(document.layers)NN4=true;\n");
w.document.write( "function autoSize() {\n");
w.document.write( "if(IE5) self.resizeTo(document.images[0].width+10,
document.images[0].height+31)\n");
w.document.write( "else if(NN6) self.sizeToContent();\n");
w.document.write( "else window.resizeTo(document.images[0].width,
document.images[0].height+20)\n");
w.document.write( "self.focus();\n");
w.document.write( "}\n</scri");
w.document.write( "pt>\n");
w.document.write( "</head><body leftmargin=0
topmargin=0 marginwidth=0 marginheight=0 onLoad='javascript:autoSize();'>"
);
w.document.write( "<a href='javascript:window.close();'><img
src='"+monImage+"' border=0 alt='"+monTitre+"'></a>" );
w.document.write( "</body></html>" );
w.document.close();
}
-->
</script>
Nous avons ajouté la méthode window.close()
en lien direct sur l'image, afin que la fenêtre se ferme lorsque
l'on clique sur l'image...
Il ne nous reste
plus qu'à composer notre code HTML:
<body bgcolor="#FFFFFF">
Cliquez sur l'un de ces liens:
<hr align="left" width="175">
Une <a href="#" onClick="resizePopUp('petite.gif','Petite image');">petite</a>
image.<br>
Une image <a href="#" onClick="resizePopUp('moyenne.gif','Image
moyenne');">moyenne</a>.<br>
Une <a href="#" onClick="resizePopUp('grande.gif','Grande image');">grande</a>
image.
</body>
Ce
script est visible ici,
et nos fichiers sources se trouvent ici.
|
[