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!

Débutant : lien page html/ fichier js

JavaScript

Vue hybride

Discussions similaires

Partager

Partager