Débutant : lien page html/ fichier js

**nal** · 21/08/2014, 11h12

Bonjour,

Je début avec javascript.
J'ai trouvé un tutoriel Javascript pour réaliser une galerie d'images.
ça donne côté html:

Code html :

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
<HTML>
<HEAD>
<SCRIPT>
<script type=\"text/javascript\" src=\"script.js\"></script>
</SCRIPT>
</HEAD>
 
<BODY>
 
<div id="galerie">
 
 <ul id="galerie_mini">
    <li>
      <a href="images/photo1.jpg" title="Titre de la photo 1"><img src="images/minis/m_photo1.jpg" alt="Le titre de la photo 1" /></a>    </li>
    <li>
      <a href="images/photo2.jpg" title="Titre de la photo 2"><img src="images/minis/m_photo2.jpg" alt="Le titre de la photo 2" /></a>    </li>
    <li>
      <a href="images/photo3.jpg" title="Titre de la photo 3"><img src="images/minis/m_photo3.jpg" alt="Le titre de la photo 3" /></a>    </li>
    <li>
          </li>
</ul>
 
  <dl id="photo">
    <dt>"Titre photo 1"</dt>
    <dd><img id="big_pict" src="images/photo1.jpg" alt="Photo 1 en taille normale" /></dd>
  </dl>
</div>
 
 
</BODY>
</HTML>

et niveau fichier .js :

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
 
function displayPics()
{
  var photos = document.getElementById('galerie_mini') ;
  // On récupère l'élément ayant pour id galerie_mini
  var liens = photos.getElementsByTagName('a') ;
  // On récupère dans une variable tous les liens contenu dans galerie_mini
  var big_photo = document.getElementById('big_pict') ;
  // Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
 
  var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
  // Et enfin le titre de la photo de taille normale
  // Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
  for (var i = 0 ; i < liens.length ; ++i) {
    // Au clique sur ces liens 
    liens[i].onclick = function() {
      big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
      big_photo.alt = this.title; // On change son titre
      titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
      return false; // Et pour finir on inhibe l'action réelle du lien
    };
  }
}
 
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displayPics;

je précise qu'en ce qui concerne le script js je l'ai mis tel quel dans le fichier : la mise en forme est elle correcte?
Manque t-il quelque chose pour établir le lien entre ma page html et le fichier?
La page html ne semble pas en lien avec le fichier...
quelqu'un verrait-il où ça cloche??

Merci par avance pour votre aide!

**SylvainPV** · 21/08/2014, 11h41

Code :

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

<SCRIPT><script type=\"text/javascript\" src=\"script.js\"></script></SCRIPT>

Un script dans un script

**nal** · 21/08/2014, 11h53

Oups...

**nal** · 21/08/2014, 12h05

J'ai corrigé...
mais il se passe toujours rien...
en principe, en cliquant sur une des vignettes ça fait appel au script et affiche l'image en grand format + le titre en boucle en bas.

Dans mon cas, le lien avec l'image grand format a lieu hors cadre et sans titre comme sans lien avec le fichier js.

**devyan** · 21/08/2014, 12h13

Bonjour,

D'après ce que j'ai pu voir (d'ailleurs si tu pouvais remplacer </CODE> par [/CODE] dans ton premier message

) si tu enlèves le chargement de ton fichier script tu a exactement le même comportement que maintenant non ?

Il faut appeler ta fonction displayPics() pour activer le fonctionnement.

devYan.

**nal** · 21/08/2014, 12h52

Oui le fichier script n'est pas pris en compte...il se passe pareil sans

concernant la fonction displayPics ()
il me semble y avoir fait appel dans le fichier js :

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
 
function displayPics()
{
  var photos = document.getElementById('galerie_mini') ;
  // On récupère l'élément ayant pour id galerie_mini
  var liens = photos.getElementsByTagName('a') ;
  // On récupère dans une variable tous les liens contenu dans galerie_mini
  var big_photo = document.getElementById('big_pict') ;
  // Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
 
  var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
  // Et enfin le titre de la photo de taille normale
  // Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
  for (var i = 0 ; i < liens.length ; ++i) {
    // Au clique sur ces liens 
    liens[i].onclick = function() {
      big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
      big_photo.alt = this.title; // On change son titre
      titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
      return false; // Et pour finir on inhibe l'action réelle du lien
    };
  }
}
 
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displayPics;

Faut il y faire appel ailleurs ou autrement?
merci!

**devyan** · 21/08/2014, 14h29

Envoyé par nal

Code :

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

1
2
3
4
5
 
...
 
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
window.onload = displayPics;

Faut il y faire appel ailleurs ou autrement?

Ça devrait fonctionner si tu n'as pas une autre affectation qui remplace celle-ci ailleurs dans tes scripts.
Sinon il vaut mieux faire comme l'indique SylvainVP dans la sujet "Problème avec window.onload".

...

Pour gérer de multiples déclencheurs sur un seul évènement, utilise :

Code :

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

1
2
3
window.addEventListener("load", function(){
//ton code ici
});

Soit dans ton cas : window.addEventListener("load", displayPics);

devYan.

**nal** · 21/08/2014, 15h30

ça ne fonctionne toujours pas...

Le problème doit venir d'ailleurs...

**NeoGeekette** · 21/08/2014, 15h39

Bonjour Nal,

Peux tu afficher ton fichier HTML comme il est actuellement car j'ai une petite idée et je veux juste la vérifier.

Flo, Neogeekette.

**nal** · 21/08/2014, 16h02

Tu veux dire l'affichage du code source? ça donne :

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
<HTML>
<HEAD>
		<title>Galerie photo en xHTML CSS et JavaScript</title>
 
	  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" /> 
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="Content-Language" content="fr" />
 
 
 
<TITLE>Galeries</TITLE>
 
<STYLE type=text/css>
div#galerie
{
  width: 410px ;
  background: #eed ;
  border: 1px solid #dcb ;
  padding: 15px ;
  margin: 15px 30px ;
  text-align: center ;
 
}
div#galeriemini
{
width: 100% ;
height: 65px;
overflow: auto;
 
}
 
ul#galerie_mini
{
  margin: 0 ;
  padding: 0 ;
  list-style-type: none ;
}
 
ul#galerie_mini li
{
  float: left ;
}
 
ul#galerie_mini li a img
{
  margin: 2px 1px ;
  border: 1px solid #dcb ;
}
 
dl#photo
{
  clear: both ;
  margin: 0 auto ;
}
 
dl#photo dt
{
  font: italic 2.5em/1.5em Georgia, serif ;
  color: #dcb ;
}
 
dl#photo dd
{
  margin: 0 ;
}
 
dl#photo img
{
  border: 1px solid #dcb ;
}
</STYLE>
 
<script type=\"text/javascript\" src=\"script.js\"></script>
 
<script type="text/javascript">
//<![CDATA[
var gs_d=new Date,DoW=gs_d.getDay();gs_d.setDate(gs_d.getDate()-(DoW+6)%7+3);
var ms=gs_d.valueOf();gs_d.setMonth(0);gs_d.setDate(4);
var gs_r=(Math.round((ms-gs_d.valueOf())/6048E5)+1)*gs_d.getFullYear();
var gs_p = (("https:" == document.location.protocol) ? "https://" : "http://");
document.write(unescape("%3Cscript src='" + gs_p + "s.gstat.orange.fr/lib/gs.js?"+gs_r+"' type='text/javascript'%3E%3C/script%3E"));
//]]>
</script>
</HEAD>
 
 
<BODY>
 
 
<div id="galerie">
 
 
 <ul id="galerie_mini">
    <li>
      <a href="images/sculptures/photo1.jpg" title="Titre de la photo 1"><img src="images/minis/sculptures/m_photo1.jpg" alt="Le titre de la photo 1" /></a>    </li>
    <li>
      <a href="images/sculptures/photo2.jpg" title="Titre de la photo 2"><img src="images/minis/sculptures/m_photo2.jpg" alt="Le titre de la photo 2" /></a>    </li>
    <li>
      <a href="images/sculptures/photo3.jpg" title="Titre de la photo 3"><img src="images/minis/sculptures/m_photo3.jpg" alt="Le titre de la photo 3" /></a>    </li>
    <li>
      <a href="images/sculptures/photo4.jpg" title="Titre de la photo 4"><img src="images/minis/sculptures/m_photo4.jpg" alt="Le titre de la photo 4" /></a>    </li>
 
</ul>
 
  <dl id="photo">
    <dt>"Musical"</dt>
    <dd><img id="big_pict" src="images/sculptures/photo1.jpg" alt="Photo 1 en taille normale" /></dd>
  </dl>
</div>
 
 
<script type="text/javascript">
//<![CDATA[
if (typeof _gstat != "undefined") _gstat.audience('','pagesperso-orange.fr');
//]]>
</script>
</BODY>
</HTML>

**devyan** · 21/08/2014, 16h14

Essaye en désactivant le code "analytics" (en commentant la ligne 82) pour voir si sans ce script externe ton window.onload focntionne.

**SylvainPV** · 21/08/2014, 16h38

C'est quoi ces antislash qui se balladent dans la balise script ? Encore une fois, essaie ça :

Code :

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

<script src="script.js"></script>

**NeoGeekette** · 21/08/2014, 16h40

Re Nal,

Essaye à la ligne 74

Code :

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

1
2
 
<script type="text/javascript" src="script.js"></script>

au lieu de ta ligne actuelle

Code :

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

1
2
 
<script type=\"text/javascript\" src=\"script.js\"></script>

Tiens moi au courant, je serais heureuse que cela puisse t'aider.

Flo, Neogeekette.

**NeoGeekette** · 21/08/2014, 16h42

Oups doublon avec Sylvain, désolé.

Flo, Neogeekette qui a encore fait la blonde

**nal** · 21/08/2014, 16h51

J'ai essayé sans les antislash et ça ne fonctionne pas non plus...

**devyan** · 21/08/2014, 16h52

Ça fait partie du problème signalé en premier cette histoire d'antislashs

Envoyé par SylvainPV

Code :

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

<SCRIPT><script type=\"text/javascript\" src=\"script.js\"></script></SCRIPT>

Un script dans un script

**NeoGeekette** · 21/08/2014, 17h11

Sans les anti-slashs c'est pas normal que ça ne marche pas.

Ah oui, il me vient une idée, ça dépends ou se situe ton script js dans l'arborescence de ton projet, car il est possible que tu ne pointes pas dessus. Je ne suis peut être pas assez claire....

Flo, neogeekette.