Posez votre question Signaler

Créer une pop up

pépette82 99Messages postés 9 juin 2003Date d'inscription - Dernière réponse le 27 avril 2004 à 23:20
Bonsoir à tous,

Sur mon site, les visiteur peuvent cliquer sur une image pour la voir un plus grand. Elle s'ouvre sur une autre page (grace au _blank). Jusque là, pas de pb.
Mais j'aimerai changer le design. je souhaiterai que lorque le visiteur clique, ça m'ouvre un cadre où y'a que l'image. C'est bien "pop up" que ça s'appelle?
Pouvez-vous me dire comment je peux créer ceci.

Vous en remerciant par avance,
Pépette

"L'administration est un lieu où les gens qui arrivent en retard, croisent dans l'escalier ceux qui partent en avance."
Lire la suite 

Créer une pop up »

5 réponses
Réponse
+1
moins plus
Salut Pépette,

Voici un exemple de script que j'ai mis sur mon site et qui ouvre un pop-up dans lequel une image s'affiche:
(Avec en plus un titre au pop-up et un lien pour le fermer)

*Tout d'abord le lien sur ton image:
<a href="javascript:PopupImage('mon_image.jpg')"><img src="mon_image.jpg" alt="Agrandir l'image" width="X" height="X" border="0"></a>


*Et enfin le script:
<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {

if (img=="mon_image.jpg") { titre="Mon Image n°1"; }
if (img=="mon_image5.jpg") { titre="Mon Image n°5"; }

w=open("",'image','width=400,height=400,toolbar=no,scrollbars=yes,resizable=yes');	
	w.document.write("<HTML><HEAD><TITLE>"+titre+"</TITLE></HEAD>");
	w.document.write("<SCRIPT language=javascript>function checksize()  { if (document.images[0].complete) {  window.resizeTo(document.images[0].width+25,document.images[0].height+75); window.focus();} else { setTimeout('check()',250) } }</"+"SCRIPT>");
	w.document.write("<BODY onload='checksize()' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0><IMG src='"+img+"' border=0>");
	w.document.write("<p align='center'><a href='javascript:window.close()'>Fermer</a></p>");
	w.document.write("");
	w.document.write("</BODY></HTML>");
	w.document.close();
}
</SCRIPT>

Ce script s'adapte à la taille de l'image (c'est pratique quand tu souhaites agrandir plusieurs images de taille différente).
Il y a un test au début de la fonction pour afficher le titre, et un lien pour fermer le pop-up.

Pour revenir à ton problème, tout dépend du nombre d'images à agrandir, de leur taille, etc. Ce script sera donc à adapter.
Tiens-moi au courant et @+
Ajouter un commentaire
Réponse
+1
moins plus
Bonsoir,

Merci Sir Hill pour ta réponse...
Malaheureusement, mon image st bien présente. IE voit bien qu'il y a un lien.. mais rien ne se passe quand on clique dessus... Je suppose que mon script est mal écrit... Je te le copie ci dessous.. peux tu me dire ce que tu en penses.

Merci d'avance.
Pépette
Ajouter un commentaire
Réponse
+1
moins plus
dsl, j'ai oublié de copier.... :p

<a href="javascript:PopupImage('photos/accueil.jpg')"><img src="photos/accueil.jpg" alt="Agrandir l'image" width="450" height="320" border="0"></a>
<SCRIPT LANGUAGE="JavaScript">
function PopupImage("photos/accueil.jpg") {

if (img=="photos/accueil.jpg") { titre="Bienvenue"; }

w=open("",'image','width=400,height=400,toolbar=no,scrollbars=yes,resizable=yes');
w.document.write("<HTML><HEAD><TITLE>"Bienvenue"</TITLE></HEAD>");
w.document.write("<SCRIPT language=javascript>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+25,document.images[0].height+75); window.focus();} else { setTimeout('check()',250) } }</"+"SCRIPT>");
w.document.write("<BODY onload='checksize()' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0><IMG src='"photos/accueil.jpg"' border=0>");
w.document.write("<p align='center'><a href='javascript:window.close()'>Fermer</a></p>");
w.document.write("");
w.document.write("</BODY></HTML>");
w.document.close();
}
</SCRIPT>
Ajouter un commentaire
Réponse
+1
moins plus
Salut Pépette,

Oui ton code comportait quelques petites erreurs, le revoici donc corrigé:

<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {

if (img=="photos/accueil.jpg") { titre="Bienvenue"; }

w=open("",'image','width=400,height=400,toolbar=no,scrollbars=yes,resizable=yes');	
	w.document.write("<HTML><HEAD><TITLE>"+titre+"</TITLE></HEAD>");
	w.document.write("<SCRIPT language=javascript>function checksize()  { if (document.images[0].complete) {  window.resizeTo(document.images[0].width+25,document.images[0].height+75); window.focus();} else { setTimeout('check()',250) } }</"+"SCRIPT>");
	w.document.write("<BODY onload='checksize()' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0><IMG src='"+img+"' border=0>");
	w.document.write("<p align='center'><a href='javascript:window.close()'>Fermer</a></p>");
	w.document.write("");
	w.document.write("</BODY></HTML>");
	w.document.close();
}
</SCRIPT>

Comme je te l'avais dit, ce script s'adapte à la taille de l'image (grâce à la fonction "checksize") et fait un test au début de la fonction pour afficher le titre. C'est pratique si tu as plusieurs images.
Si tu n'as qu'une seule image à ouvrir (ça a l'air d'être le cas), alors tu n'as pas besoin de tout ça.
Revoici le code simplifié:

*Tout d'abord le lien sur ton image:

<a href="javascript:PopupImage()"><img src="photos/accueil.jpg" alt="Agrandir l'image" width="450" height="320" border="0"></a>

*Et enfin le script:

<SCRIPT LANGUAGE="JavaScript">
function PopupImage() {
	w=open("",'image','width=463,height=370,toolbar=no,scrollbars=yes,resizable=yes');	
	w.document.write("<HTML><HEAD><TITLE>Bienvenue</TITLE></HEAD>");
	w.document.write("<BODY leftMargin=0 topMargin=0 marginwidth=0 marginheight=0><IMG src='photos/accueil.jpg' border=0>");
	w.document.write("<p align='center'><a href='javascript:window.close()'>Fermer</a></p>");
	w.document.write("");
	w.document.write("</BODY></HTML>");
	w.document.close();
}
</SCRIPT>


Tu constateras par ailleurs qu'il y a un lien pour fermer le pop-up. Tu peux bien sûr le supprimer, le remplacer par un bouton ou encore changer son style.
Si tu as des questions, n'hésite pas.
Bon courage et @+
Ajouter un commentaire
Réponse
+0
moins plus
Bonjour,
Un exemple sur le site ci-dessous dans Codes et langages, HTML.
Bonne suite.
http://perso.wanadoo.fr/gerard.g
Ajouter un commentaire
Ce document intitulé « Créer une pop up » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
5 extensions si vous voulez revenir à l'ancien Facebook