Le tutoriel informatique, c'est pas automatique! Quoi que...
  • Accueil -
  • Forum -
  • Contact -
  • Plan du site -
  • A Propos
  • Photoshop
  • Référencement
  • Rémunération
  • Internet/Web
  • Informatique
  • Javascript
  • Forum
  • Contacts
  • S’enregistrer
  • Faire Un Lien
  • e-Informatique
  • Autres Sites

10 visiteurs connectés
Record: 461 connectés
Total visiteurs: 8616734

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:

<script type="text/javascript">
<!--
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 href="javascript:popimage('images/grandeimage.png')"><img src="images/petiteimage.png" alt="Agrandir l'image" border="0" /></a>


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.

D'autres tutoriels Javascript

Premier tutorielbarre de navigationDernier tutoriel

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 !

exemple: Jean M.

exemple: rene.dupont@mail.com

Contre le spam

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