18041 sujets

Questions générales et questions de débutants

Ou est l erreur dans le script [résolu]

bonjour a tous

j ai creer sur forumgratuit un forum


je me suis inspirer de ce site pour faire ma galerie

http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html

j explique ce que j ai fait ...

j ai donc tout d abord crrer dans un sujet une page html tres simple

<html>
<head>

</head>
<body>

</body>
</html>


ensuite j ai copier ce code entre les balises <body>

</body>


<div id="galerie">
  <ul id="galerie_mini">
    <li>
      <a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a>    </li>
    <li>
      <a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a>    </li>
    <li>
      <a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a>    </li>
    <li>
      <a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a>    </li>
    <li>
      <a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a>    </li>
    <li>
      <a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a>    </li>
    <li>
      <a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a>    </li>
    <li>
      <a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a>    </li>
    <li>
      <a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a>  </li>
</ul>

  <dl id="photo">
    <dt>Titre de la photo 1</dt>
    <dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
  </dl>
</div>


puis j ai copier ce code a la suite mon css

div#galerie
{
  width: 410px ;
  background: #eed ;
  border: 1px solid #dcb ;
  padding: 15px ;
  margin: 15px 30px ;
  text-align: center ;
  font: 0.9em Georgia, serif ;
}

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

puis creer un script javascript
a cet endroit dans forumgratuit
"HTML & JAVASCRIPT

Gestion des codes Javascript"

qui m a donne ceci "http://la-peche-a-la-perle.forumgratuit.be/11419.js"

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;


que j appelle a cet endroit entre les balises <head> et </head>
de cette facon
<script type="text/javascript" src="http://la-peche-a-la-perle.forumgratuit.be/11419.js"></script>


mais je n ai pas le meme resultat que sur l exemple du site , tout est decale qui peux m expliquer svp[/i]
Modifié par 6l20 (18 May 2013 - 10:28)
salut,
j'ai survolé rapidement ta question mais je pense que ton script devrait être place enfin de code, juste avant ta balise </body>. Ce script fait appel à des éléments du DOM qui ne sont pas encore chargés.
Bonjour,

flexi2202 a écrit :
puis j ai copier ce code a la suite mon css

A la suite de quoi ? Où dans votre document ?

pouvez-vous nous communiquer l'adresse de votre site, ce sera plus facile pour vous venir en aide ?
Parfait, et la solution au problème est ? Smiley smile

Merci de rajouter le tag [résolu] dans le titre de votre sujet en éditant votre premier post alors Smiley cligne
bonsoir

j ai fini par abandonner le projet et j ai installer une autre galerie , qu un membre sir forumgratuit m a aider a imbriquer dans mon forum
Sujet clos
Aller à