Pseudo Mot de passe
fleche Inscription
fleche Mot de passe oublié ?
Informations Générales
Chargement en cours...
Nombre de Visites fleche [ 140470 ]
Votre IP fleche [ 38.103.63.16 ]
Vous êtes ici : Home Page Dossiers Trucs et astuces (JavaScript) Popup pour image
Imprimer Imprimer le document

Informations Membres

[195] Posts sur le forum
[177] Membres inscrits
Il y a en ligne :
  arrow 0 Membre
  arrow 1 Invité
fled Membre en ligne:
Aucun

Partenariat

Partenariat Vous pouvez aider ce site à évoluer, en contribuant à son développement. Proposez vos idées de cours et/ou dossiers. Rendez-vous dans « Partenariat » pour en savoir plus.

Nom de domaine

www.

Partenaires

Alsacreations
L'éditeur JavaScript
WebRankInfo
DicoDuNet
Noogle

JavaScript - Popup qui s'ouvre à la dimension des images

Auteur : 3L!X | Créé le : 05/10/2005 à 20H00

Le seul fait de cliquer une vignette (image miniature) provoque l'ouverture d'une popup à la dimension de l'image de base.
Ces images peuvent être de dimensions différentes, ce qui fait la valeur de ce script.

Pour refermer la popup, il suffira de cliquer sur sa fenêtre.

Cliquer pour agrandir

Nous allons appeler une image qui fait ici 640x480. Il n'existe sur le serveur qu'une seule image, avec pour la vignette une limitation de dimension par width="120". 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é.

Entre les balises <HEAD> et </HEAD> :

<script type="text/javascript">
<!--
function popupImage(url,titre)
{
var img = null;
img = new Image();
img.src = url;

var w = img.width; var h = img.height+15; // Dimensions de l'image
var top = (screen.height-h)/2; // Centrage en hauteur
var left = (screen.width-w)/2; // Centrage en largeur
if(!titre) {var titre = 'Sans titre';}
waitForLoading();

function waitForLoading()
  {
  if(!img.complete) {setTimeout(waitForLoading, 30); return;}
  var Options = 'location=no,directories=no,status=no,menubar=no,toolbar=no,scrollbars=no,resizable=no';
  var pop = window.open('', 'monImage', Options+',top='+top+',left='+left+',width='+w+',height='+h);
  pop.document.write('<html><head><title>'+titre+'</title></head>');
  pop.document.write('<body onclick="window.close()" style="margin:0;padding:0">');
  pop.document.write('<img src="'+img.src+'" alt="'+titre+'" />');
  pop.document.write('<div style="font:bold 7pt Arial;text-align:center">Cliquez dans la fenêtre pour la fermer</div>');
  pop.document.write('</body></html>');
  pop.document.close();
  }
}
//-->
</script>

Balise <BODY> :

Rien

Entre les balises <BODY> et </BODY> :

<a href="javascript:popupImage('images/image1.jpg','Image 1')">
<img src="images/image1.jpg" width="120" alt="Cliquer pour agrandir" /></a>

(2) commentaires - Voir/EditerAjout commentaire

Haut de page