Débutant : lien page html/ fichier js

Version imprimable

Voir 40 message(s) de cette discussion en une page

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 ?

Voir 40 message(s) de cette discussion en une page