Exemples & Sources en JavaScript Annuaire francophone du CGI Exemples & Sources en JavaScript
Accueil du site

Détection (3)
Divers (10)
Formulaire (11)
Image (5)
Navigation (3)

Les 10 derniers
Les plus vus

Infos sur JavaScript
Les mots réservés
Les événements
Les opérateurs

Archives

A propos du site
Le Forum du site

Linker Scripts-fr !

Faîtes un lien sur votre site

 

Valid HTML 4.01!
Valid CSS!

Actuellement 3 connectés

Bienvenue sur Scripts-fr.com

Pop-Up d'image


Exemple :

Ce script permet de créer des pop-up à la taille des images que l'on veut afficher en grand. Son gros avantage, c'est que vous pouvez mettre des images au format différent, la fenêtre se retaillera en fonction.

                 
Explication du script : (a copier et à coller)

<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>


© 2002 Java.Scripts-fr - Tous droits réservés - Design altiline.com - Hébergement eBusiness.be
Pour tout commentaire, n'hésitez pas à contacter le webmaster

Contact !