Créer une pop up
pépette82
Messages postés
100
Statut
Membre
-
SirHill Messages postés 4070 Statut Contributeur -
SirHill Messages postés 4070 Statut Contributeur -
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."
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."
A voir également:
- Créer une pop up
- Comment créer un groupe whatsapp - Guide
- Pop up mcafee - Accueil - Piratage
- Créer un compte google - Guide
- Créer une adresse hotmail - Guide
- Créer un lien pour partager des photos - Guide
5 réponses
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:
*Et enfin le 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 @+
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 @+
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
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
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>
<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>
Salut Pépette,
Oui ton code comportait quelques petites erreurs, le revoici donc corrigé:
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:
*Et enfin le 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 @+
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 @+
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bonjour,
Un exemple sur le site ci-dessous dans Codes et langages, HTML.
Bonne suite.
http://perso.wanadoo.fr/gerard.g
Un exemple sur le site ci-dessous dans Codes et langages, HTML.
Bonne suite.
http://perso.wanadoo.fr/gerard.g
