Débutant : lien page html/ fichier js

Version imprimable

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:

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:

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! :)

21/08/2014, 11h41
SylvainPV

Code:

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

Un script dans un script :weird:

:fleche: <script src="script.js"></script>
21/08/2014, 11h53
nal

Oups...:mrgreen:
21/08/2014, 12h05
nal

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.
21/08/2014, 12h13
devyan

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.

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:

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!
:)

21/08/2014, 14h29
devyan
Citation:
Envoyé par nal

Code:

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

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

Code:

1 2 3 window.addEventListener("load", function(){ //ton code ici });
Soit dans ton cas : window.addEventListener("load", displayPics);

devYan.
21/08/2014, 15h30
nal

ça ne fonctionne toujours pas...:?
Le problème doit venir d'ailleurs...
21/08/2014, 15h39
NeoGeekette

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.

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

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

21/08/2014, 16h14
devyan

Essaye en désactivant le code "analytics" (en commentant la ligne 82) pour voir si sans ce script externe ton window.onload focntionne.
21/08/2014, 16h38
SylvainPV

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

Code:

<script src="script.js"></script>
21/08/2014, 16h40
NeoGeekette
Re Nal,

Essaye à la ligne 74
Code:

1 2 <script type="text/javascript" src="script.js"></script>
au lieu de ta ligne actuelle
Code:

1 2 <script type=\"text/javascript\" src=\"script.js\"></script>
Tiens moi au courant, je serais heureuse que cela puisse t'aider.

Flo, Neogeekette.
21/08/2014, 16h42
NeoGeekette

Oups doublon avec Sylvain, désolé. :oops:

Flo, Neogeekette qui a encore fait la blonde
21/08/2014, 16h51
nal

J'ai essayé sans les antislash et ça ne fonctionne pas non plus...:?
21/08/2014, 16h52
devyan

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

Citation:

Envoyé par SylvainPV

Code:

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

Un script dans un script :weird:

:fleche: <script src="script.js"></script>
21/08/2014, 17h11
NeoGeekette

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.
21/08/2014, 17h21
devyan

:oops: C'est tellement basique comme cause probable que je n'y avais même pas pensé :oops:
21/08/2014, 23h22
nal

niveau arborescence j'ai mis mon fichier .js au même niveau que la page html...
22/08/2014, 09h26
SylvainPV

Et pas d'erreurs dans la console JavaScript ?

Pour l'erreur dans la console javascript : comment la vois t-on?

Sinon le problème venait vraiment du lien entre le fichier javascript et la page html car j'ai inséré directement le code du script.js dans l'html (dans la balise script) et ça a fonctionné!! :D
:

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
 
<script type="text/javascript">
 
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;
</script>

Je suis contente que ça fonctionne enfin ça m'ennuie un peu de ne pas comprendre pourquoi le lien externe avec le fichier js. ne fonctionnait pas...
:roll: mais bon ça marche comme ça...

En tout cas merci à tous pour votre aide!
:D

Salut nal,

Ajout des alerts dans ton script afin d'afficher les valeurs sur l'événement "onclick".

Code:

1
2
3
4
5
6
7
8
 
liens[i].onclick = function() {
      alert("ref :"+this.ref);
      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
    };

Perso j'ai testé ton code (firefox) il marche.
Vide le cache de Browser et fait de nouveau un test.

22/08/2014, 11h43
SylvainPV

Arrêtez avec les alert(), on a inventé les inspecteurs de développement depuis ;)

http://javascript.developpez.com/faq...syntaxe#Erreur

Alors j'ai essayé le même code sur un autre serveur, un autre site et le lien avec le fichier .js fonctionne normalement...
mais sur ce site là (une page perso orange) ça semble être incompatible avec un script de statistique orange...

en faisant F12 ça faisait :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <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> <noframes><body><div height="35%" width="45%" background-color="red" position="absolute">TRUC TEST EXPO</div><script type="text/javascript"> //<![CDATA[ if (typeof _gstat != "undefined") _gstat.audience('','pagesperso-orange.fr'); //]]> </script>
Devyan : Comment désactive t-on le code "analytics"?

Merci! :)

22/08/2014, 13h34
nal

de toute façon sur cette page j'ai pas accès au fichier analytics.js
pour le reste : incompatibilité avec le code anatytics pour moi ça va un peu trop loin pour le moment...:mrgreen:

en tout cas vu que ça marche pour moi en insérant le code du script.js directement dans le code html je vais considérer le premier problème comme résolu Merci en tout cas!
:)
22/08/2014, 13h57
devyan

pour tester tu mets la ligne 8 en commentaire ;)
25/08/2014, 10h10
SylvainPV

Comment sais-tu que que ton problème vient du script ajouté par orange ? Regarde dans la console, là tu nous montres le contenu HTML de ta page.

En faisant F12 ça donnait :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>
 
<noframes><body><div height="35%" width="45%" background-color="red" position="absolute">TRUC TEST EXPO</div><script type="text/javascript">
//<![CDATA[
if (typeof _gstat != "undefined") _gstat.audience('','pagesperso-orange.fr');
//]]>
</script>

26/08/2014, 20h34
nal

....Sinon j'ai contourné le problème et trouvé une autre solution.
Jusqu'à présent mes fichiers html et js se trouvaient niveau arborescence au même niveau que la page index.
Là j'ai juste rajouté un dossier pour y insérer l'html et le fichier script et le lien a bien eu lieu sans problème entre les deux...

il y avait bien un truc au niveau de la page index...
enfin quoi que ça ai pu être, en isolant mes fichiers dans l'arborescence ça fonctionne :) je ne vais pas chercher plus loin...

Donc merci à tous pour votre aide! :lol:

Nal