Les Tutoriaux: Javascript » Tutorial Pop-pup (popup) à la taille exacte d'une image
Informations :
Titre: Pop-pup (popup) à la taille exacte d'une image
Description: Vous cherchez un moyen d'ouvrir vos images en cliquant simplement dessus et permettre à vos visiteurs de consulter une version agrandie de celles-ci sans pour autant déformer votre site. Ce code javascript est fait pour vous. Il va créer un popup à la dimension et à la taille exacte de votre image. Et lorsque vous cliquerez dans ou hors du popup, il se fermera automatiquement ! Testez par vous-même !
Dernière modification: L 13/04/2008 à 12h54
Auteur: Yoyo
Créer un popup qui s'ajuste automatiquement à la taille de l'image
Vous cherchez à réaliser un popup avec une image lorsque vous cliquerai sur celle-ci ? Ce code est fait pour vous !
Ce code est assez spécial, il permet d'ouvrir une pop-pup à partir d'une image miniature par exemple ou d'un lien pour ouvrir une image à grande dimension et à dimension exacte de l'image. Lorsque vous cliquez sur la pop-pup ou que vous cliquez hors de la pop-pup, cette dernière se ferme !
Pour installer cette popup sur une page de votre site, vous devez insérer entre les balises <head> </head> le code suivant:
<!--
function popimage(img) {
titre="Agrandissement";
w=open("",'image','width=1,height=1,toolbar=no,scrollbars=no,resizable=no');
w.document.write("<script type='text/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()' topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>");
w.document.write("<img src='"+img+"' border='0' alt='image' />");
w.document.close();
}
//-->
</script>
Ensuite, lorsque vous voudrez insérer un script dans votre page qui ouvre une image en popup, il suffira d'insérer ce code en changeant l'adresse par celle de votre image évidemment
A vous de jouer :)
Si vous avez la moindre question sur ce tutoriel, n'hésitez pas à nous le faire savoir sur le forum:
- Voir la discussion et le(s) 26 commentaire(s) de ce tutoriel
- Ecrire un commentaire ou poser une question sur le tutoriel
Les tutoriels sont la propriété de leurs auteurs ainsi que de TutoMaker.com. Veuillez contacter le webmaster pour toute demande d'utilisation.
Faire un lien vers ce tutoriel
Si vous voulez faire un lien vers cce tutoriel sur votre site, vous pouvez utiliser un des codes pour forum disponibles ci-dessous:
Ou bien vous pouvez aussi utiliser ce code html pour votre site ou votre blog:
Partagez ce tutoriel avec vos amis !
Copyright TutoMaker.com © Rentabiliser son site
Toute reproduction totale ou partielle du site est interdite sans l'accord de l'auteur, surtout que ça se voit vite ;)