Rechercher : dans
Par :

Créer une pop up

Dernière réponse le 27 avr 2004 à 23:20:12 pépette82, le 26 avr 2004 à 23:06:41 
 Signaler ce message aux modérateurs

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."

Meilleures réponses pour « Créer une pop up » dans :
Le blocage des pop-up dans Google Toolbar VoirVider le compteur de fenêtres pop-up La barre d'outils Google Toolbar n'enregistre pas les fenêtres pop-up qui ont été bloquées sur l'ordinateur. Il n'est donc pas indispensable de remettre à zéro ce compteur de fenêtres pop-up. Toutefois, il est...
Javascript - Créer une popup VoirProblème Comment créer une fenêtre pop-up qui s'ouvrent à l'ouverture d'une page ? Solution Il suffit d'utiliser le code suivant : window.open("TON SITE"); Notez que les pop-ups seront généralement...

1

SirHill, le 27 avr 2004 à 02:02:59
  • +1

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 @+

Répondre à SirHill

2

g, le 27 avr 2004 à 08:44:41

Bonjour,
Un exemple sur le site ci-dessous dans Codes et langages, HTML.
Bonne suite.
http://perso.wanadoo.fr/gerard.g

Répondre à g

3

pépette82, le 27 avr 2004 à 20:44:46

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

Répondre à pépette82

4

pépette82, le 27 avr 2004 à 20:45:20

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>

Répondre à pépette82

5

 SirHill, le 27 avr 2004 à 23:20:12
  • +1

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 @+

Répondre à SirHill
Collection CommentÇaMarche.net