[Débutant] Popup avec javascript dans un fichier séparé

Version imprimable

Bonjour à tous,

Je veux séparer le javascript du code xHTML. Par conséquent, j'ai créé un fichier .xhtml et un autre .js. Cependant, je n'arrive pas à ouvrir de popup.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="script.js"></script> </head> <body> <a href="#" id="popup"><img src="test.jpg" alt="test"></a> </body> </html>
Code:

document.getElementById('popup').onClick="window.open('image.jpg','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0');return(false)"

Comment faire ?

Merci d'avance,

Marco85

Dans ton code javascript, tu fais xxx.onClick = STRING alors qu'il faudrait faire
Code:

1 2 3 4 5 6 7 8 document.getElementById('popup').onClick=function(){ window.open( 'image.jpg', '_blank', 'toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0' ); return(false); };
Le code javascript se trouvant à l'intérieur de tes guillemets en html doit être enlevé de ceux-ci et placé dans une fonction. Regarde la différence entre ton code et le mien : le function() {...} n'est pas en rouge, car c'est du code Javascript. Tandis que chez toi, c'est en rouge parce que c'est considéré comme une chaîne de caractère.

Merci pour cette remarque très pertinente. Je suis vraiment un débutant (depuis ce matin ...) et je n'avais même pas remarqué.

Voici donc mon code actuel :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="script.js"></script> </head> <body> <a href="#" id="popup"><img src="test.jpg" alt="test"></a> </body> </html>
Code:

1 2 3 4 5 6 7 8 document.getElementById('popup').onClick=function(){ window.open( 'image.jpg', '_blank', 'toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0' ); return(false); };
Malheureusement, quand je clique sur le lien, rien ne s'ouvre. Comme j'utilise Firefox, le debugger me dit : document.getElementById("popup") has no properties. Je ne comprends pas trop ce que ça veut dire ni comment résoudre ce problème.

Quelqu'un peut-il éclairer ma lanterne sur cette erreur et sur la manière de la résoudre ?
Merci d'avance.

Marco85

Bon, ça, c'est plus complexe, effectivement... mais facilement soluble.

ton code javascript est exécuté pile au moment où il est chargé, et le document n'a peut-être pas encore chargé toute la page HTML.

Dans ce cas, il te suffit d'insérer ce code dans window.onload afin de demander que le code soit exécuté une fois que la page HTML sera entièrement chargée.
Code:

1 2 3 4 5 6 7 8 9 10 window.onload=function() { document.getElementById('popup').onClick=function(){ window.open( 'image.jpg', '_blank', 'toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0' ); return(false); }; };

20/12/2006, 15h38
Marco85

Super ... merci dingoth pour la correction de cette erreur. Malheureusement, il ne se passe toujours rien. Je n'ai plus d'erreur mais rien ne s'ouvre, aucune popup. Pourtant, j'ai bien le curseur de type "main" sur mon image.

Qu'ai-je encore oublié ?

Merci encore ... et d'avance pour ton aide,

Marco85

Bon alors j'ai tout refait et tout changé ...

Voici mon code désormais :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="script.js"></script> </head> <body> <a href="#" onclick="PopupImage('image.jpg');"><img src="test.jpg" alt="test"></a> </body> </html>
Code:

1 2 3 4 5 6 7 8 9 function PopupImage(image) { window.open ( image, '_blank', 'toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0' ); }
J'ai fait une fonction comme ça ce sera réutilisable par plusieurs fichiers vu que j'aurais les mêmes options. Est-ce que c'est bien ? Est-ce que c'est la meilleure façon de faire les choses ?

D'autre part, j'aimerais modifier 2 choses :
- que la popup fasse exactement la taille de l'image affichée (sans passer ses dimensions en paramètres),
- qu'un clic sur l'image de cette popup ferme cette popup.

Est-ce possible en JavaScript ?

Merci d'avance de m'éclairer sur tous ces sujets.

Marco85

Bon, alors, là, tu commences déjà à re-mélanger Javascript et HTML, ce que tu voulais éviter, il me semble :mrgreen:

Alors, on va faire un méga-truc hyper-documenté. Mais va falloir donner un peu du tiens. À la fin, tu n'auras pas un seul morceau de code javascript dans ta page HTML.

Page HTML :
Code:

1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="script.js"></script> </head> <body> <img class="image-popup" src="test_mini.png" alt="test" /> </body> </html>
Fichier JavaScript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 // On change le comportement par défaut de JavaScript lors du chargement d'une page. window.onload=auChargement; // Voici la fonction qui sera appelée lors du chargement d'une page. function auChargement() { // Si on utilise un navigateur récent if (document.getElementById && document.getElementsByTagName) { // On récupère l'ensemble des images. // Une alternative aurait été document.images, mais c'est plus propre ainsi. var arrAllImages = document.getElementsByTagName("img"); var oImage; // Pour chaque image, for (var i = 0; i < arrAllImages.length; i++) { oImage = arrAllImages[i]; // si elle a image-popup comme classe if (oImage.className.search(/image-popup/) != -1) { // On écoute les clics oImage.onclick = function(oEvent) { // Les quatre lignes suivantes empêchent la réutilisation du comportement par défaut, // histoire de pas modifier la navigation, le cas échéant. var oEvent = (typeof oEvent != "undefined")? oEvent : event; oEvent.returnValue = false; if(oEvent.preventDefault) oEvent.preventDefault(); // On enlève le _mini de l'url de l'image. var imgPopupSrc = oImage.src.replace(/_mini/,""); // On fait enfin le popup. // Il faut modifier les paramètres. var win = window.open(imgPopupSrc, '_blank', 'parametres'); // On ajoute la fonctionnalité de fermeture automatique de la fenêtre. win.onClick = function(oEvent2) { win.close(); } } } } } }
Alors, qu'est-ce que cela apporte ?

Eh bien, maintenant, il te suffit d'avoir deux images :
- test.jpg
- test_mini.jpg

Celle qui sera chargée dans ta page sera test_mini.jpg L'autre sera l'image grandeur nature.

Pour ajouter autant d'image que tu le souhaites avec ce comportement, il suffit très simplement d'ajouter dans la balise <img /> la classe "image-popup". C'est plus simple d'écrire :

Code:

<img class="image-popup" src="test_mini.png" alt="test" />

que :

Code:

<a href="#" onclick="popup('test.png');return false;"><img src="test_mini.png" alt="test" /></a>

? non ?

Par contre, je ne sais plus comment récupérer la taille d'une image à partir de javascript (mais c'est possible). Une fois que tu l'as, il te suffit de 1) soit la passer en paramètre à la méthode window.open() dans le script.js 2) effectuer un win.resize(longueur, largeur) après l'appel à la window.open().