|
|
|
|
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."
Salut Pépette,
<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 @+ |
Bonjour,
|
Bonsoir,
|
Dsl, j'ai oublié de copier.... :p
|
Salut Pépette,
<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 @+ |
Activé pop-up Anti pop up Anti spyware pop up Blocage fenêtres pop up Bloquer les pop-up Bloquer pop up Bloquer pop up chrome Comment remettre les pop up a zero sur google Crée pop up Desactiver les avira pop up Dreamweaver créer pop up Fenetre pop-up Interdir les pop up de pub Pop up Pop up firefox Que signifie fenêtre pop-up Trop de pop up Xhtml strict fenêtre pop-up
