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

**Marco85** · 20/12/2006, 09h19

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 xHTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**dingoth** · 20/12/2006, 11h40

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Marco85** · 20/12/2006, 13h24

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 xHTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**dingoth** · 20/12/2006, 13h35

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
    };
};

**Marco85** · 20/12/2006, 14h38

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

**Marco85** · 20/12/2006, 15h57

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

Voici mon code désormais :

Code xHTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**dingoth** · 20/12/2006, 17h28

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

que :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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().

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

JavaScript

Discussions similaires

Partager

Partager