[Javascript] Créer un Popup à la taille exacte d'une image

par **Yoyo** le Lun Oct 16, 2006 12:54 am

Discussions et questions sur le tutoriel : Créer un Popup à la taille exacte d'une image

par **parent** le Dim Juil 01, 2007 12:40 am

bjr
je viens d'essayer le tuto pour avoir une fenetre pop-up qui s'ouvre en cliquant sur une petite image, pour mon blog, mais quelque chose ne marche pas... je suis chez canalblog ; je vois bien que l'image a changé (elle est entourée d'un liseré) mais en clicant dessus, rien ne se produit, et la petite 'main" disparait, preuve que le signal a bien été enregistré ..?!?
si quelqu'un peu m'aider, ce serait sympa ! merci

par **Yoyo** le Dim Juil 01, 2007 2:23 am

Salut parent. Il faudrait nous montrer ce que tu as fait. Sans support, je vois pas comment je peux t'aider

Tu l'as installé par exemple sur l'index de ton www ?

par **raffaele** le Lun Oct 22, 2007 1:36 pm

Bonjour,

J'ai récement trouver un tutoriel sur ce site http://www.java.scripts-fr.com/scripts.php?js=13# qui propose aussi les images en pop-pup sauf mon souci a moi c'est que je n'arrive pas a l'ouvrir l'image une fois que je clique dessus :roll:

par **Yoyo** le Lun Oct 22, 2007 4:04 pm

Salut, j'ai pas trop compris le problème. Moi j'ai cliqué sur les pop-pup d'exemple et elles s'ouvrent bien

par **raffaele** le Lun Oct 22, 2007 4:31 pm

Ouai moi aussi

mais dans mon test a moi ca ne fonctionne pas :roll:

le souci c'est des que je clique sur l'image ca me donne pas le pop-up

par **Yoyo** le Lun Oct 22, 2007 5:28 pm

Donc tu veux dire que tu as repris le code et qu'il ne fonctionne pas sur ton site ?

Montre nous la page ou tu as fait le test avec le script présent ici svp

Ca doit être une bête erreur de copié/collé

par **raffaele** le Mar Oct 23, 2007 2:05 pm

Voici le code

Code: Tout sélectionner: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>*** Grecosims ***</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Author" lang="fr" content="Grecosims"> <meta name="Keywords" lang="fr" content="sims,sims2,grecosims,grecosims2,greco,object,objet,telechargements,telechargement,download,downloads,luxe,luxes" /> <meta name="Description" content="Le luxe de Grecosims entre dans la vie de vos sims" /> <link rel="stylesheet" media="screen" type="text/css" title="design espace" href="css/style.css"/> <style>  </style> <script type="text/javascript">  </script> </head> <body> <div id="en_tete"><LINK REL="SHORTCUT ICON" href="css/favicon.ico"></div> <div id="corps"> <a href="#" onclick="ImageMax('varsio.jpg');"> <img src="varsio.jpg"></a>

la suite je les pas prix car pas besoin

par **Yoyo** le Mar Oct 23, 2007 4:35 pm

Donne plutôt la page ou tu as mis ton code. Tu as bien du l'héberger quelque part ? Et ca ne marche pas non plus avec le code que j'ai mis ?

Déjà c'est bizarre ton truc, comment tu veux afficher une image de base en plus grand si tu affiches la même image

Tu clics sur ton image et la même apparait ? :s

Code: Tout sélectionner: <a href="#" onclick="ImageMax('varsio.jpg');"> <img src="varsio.jpg"></a>

mais ce qui fait que ca ne marche pas, c'est surtout les espaces après le doctype, les 2 lignes tout en haut ! J'ai viré quelques trucs qui servaient à rien et fermés les balises non fermées, et voila ça marche

Voila le code corrigé, compare le avec l'autre

:

Code: Tout sélectionner: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>Grecosims</title> <link rel="stylesheet" media="screen" type="text/css" title="design espace" href="css/style.css"/> <script type="text/javascript">  </script> </head> <body> <a href="#" onclick="ImageMax('varsio.jpg');"> <img src="varsio.jpg" /></a> </body>

par **raffaele** le Mar Oct 23, 2007 10:54 pm

Merci je devait ajouter le src= pour que le liens s'ouvre

Parcontre comment le personaliser :roll:

j'aimerait remplacer ImagMax avec mon titre puis aussi de personaliser la couleurs et la taille :shock:

par **Yoyo** le Mer Oct 24, 2007 1:10 pm

Ben tu changes le contenu entre les balises title dans le javascript. Et le reste ben faut apprendre xhtml + css

On va pas tout faire en un post non plus lol

par **raffaele** le Mer Oct 24, 2007 5:23 pm

Salut Yoyo

j'ai réussi hier soir a le faire :mrgreen:

Voici exatement le code pour les deux images

Code: Tout sélectionner: <script type="text/javascript">  </script>

Je me demande s'il n'y a pas d'autres solution pour nommer la deuxième images car je suis oubligé de remetre le code du script :roll:

mais sinon tout est impecable il me reste juste un trucs que je n'arrive pas a trouver j'ai dans une petite ligne en hauts about:bank et j'aimerait mettre le liens comme par exemple http://cityofsims2.fr/varsio.html

par **Yoyo** le Mer Oct 24, 2007 6:54 pm

Ben tu peux aussi passer un autre argument à la fonction ImageMax qui sera le titre du popup non ?

Suffit de modifier un peu pour que la fonction devienne

ImageMax(chemin,titre) par exemple

Avec un truc du genre:

Code: Tout sélectionner: function ImageMax(chemin,titre) { i1 = new Image; i1.src = chemin; html = '<html><head><title>'+titre+'</title></head><body scroll="no" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" onBlur="top.close()"><IMG src="'+chemin+'" BORDER=0 NAME=ImageMax onLoad="window.resizeTo(document.ImageMax.width+10,document.ImageMax.height+30)"></body></html>'; popupImage = window.open('','_blank','width=600,height=400,toolbar=0,scrollbars=0,resizable=no'); popupImage.document.open(); popupImage.document.write(html); };

par **raffaele** le Mer Oct 24, 2007 10:23 pm

A ouai c'est mieux

merci Yoyo et pour remplacer about:blank tu c'est comment faire :?:

car personellement ca serait beaucoup plus beau :mrgreen:

par **Yoyo** le Jeu Oct 25, 2007 12:33 am

je n'ai pas de about:blank

C'est parce que tu as mal initialisé ton titre alors

par **raffaele** le Jeu Oct 25, 2007 3:42 pm

Salut j'ai un souci a nouveau

je metter tromper l'autres hier ca me donne und.... au lieu du titre

voici le code

Code: Tout sélectionner: <script type="text/javascript">  </script>

Code: Tout sélectionner: <a href="#" onclick="ImageMax('varsio.jpg');"> <img src="Simsdesign-varsio.jpg" /></a> <a href="#" onclick="ImageMax('Simsdesign-varsio.jpg');"> <img src="varsio.jpg" /></a>

par **Yoyo** le Jeu Oct 25, 2007 5:27 pm

T'as vraiment rien compris

Tu devrais apprendre le php et le javascript, ça t'aiderait.

Tu dois pas faire ça:

Code: Tout sélectionner: <a href="#" onclick="ImageMax('varsio.jpg');">

Mais ça:

Code: Tout sélectionner: <a href="#" onclick="ImageMax('varsio.jpg','Mon Titre');">

Comme ca tu peux avoir un titre précis pour chaque popup en le précisant dans le 2ème paramètre de ta fonction.

par **raffaele** le Jeu Oct 25, 2007 7:45 pm

A désoler Yoyo merci pour le problème je vais voirs si cela fonctionne

par **raffaele** le Jeu Oct 25, 2007 8:21 pm

Re:

Alors ca fonctionne parcontre j'aimerait changer le about:banck qui est dans une petite fenêtre comment faire car j'ai mis entre les " index.html ca m'avais donner seulement http://...... a la fin index.html mais pas de /varsio :roll:

par **Yoyo** le Jeu Oct 25, 2007 9:47 pm

J'ai rien compris, montre moi ta page de test sur ton site c'est plus simple

[Javascript] Créer un Popup à la taille exacte d'une image

[Javascript] Créer un Popup à la taille exacte d'une image

les fenêtres pop-up

Qui est en ligne