18041 sujets

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

Problème javascript galerie FF et IE

Bonjour, j'ai fait une page de test de la galerie avec miniatures : il y a seulement deux photos. Mais en fait lorsque je clique sur les miniatures, ça ouvre la grande photo sur un nouvelle page, au lieu de l'afficher dans le cadre. j'ai tout vérifié, et je ne vois vraiment pas d'où ça peut venir.
Une idée ?

le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

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

function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
var liens = photos.getElementsByTagName('a') ;
var big_photo = document.getElementById('big_pict') ;
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
for (var i = 0 ; i < liens.length ; ++i) 
{
liens(i).onmouseover = function() 
{
big_photo.src = this.href;
big_photo.alt = this.title;
titre_photo.firstChild.nodeValue = this.title;
return false;
};
}
}
window.onload = displayPics;
  </script>


  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">

  <title>Chrono-album</title>

  <style type="text/css">
#barre 
{
border-style: none;
font-size: 1em;
text-decoration: none;
font-weight: bold;
text-transform: capitalize;
text-align: center;
opacity: 0.484;
color: #3333ff;
line-height: 2em;
background-color: #c8ffbf;
}
  </style>

</head>

<body
 style="background-image: url(file:///H:/Mes%20documents/Eolienne/Site%20BBB2055/textures/fond_kraft.gif);">
<div style="text-align: center;" id="barre">

<span style="font-family: Calibri;"></span>
<a style="font-family: Calibri;" href="index.html">Accueil</a>
<span style="font-family: Calibri;">&nbsp;&nbsp;
&nbsp; <a href="eolienne.html">Construction
de mon éolienne</a> &nbsp;&nbsp; &nbsp; <a
 href="science.html">Science
Every Day</a> &nbsp;&nbsp; &nbsp; <a
 href="thirdimension.html">La
Photographie en 3D</a> &nbsp;&nbsp; &nbsp; <a
 href="mailto:benkdn@orange.fr">M'écrire</a></span><span
 style="font-family: Calibri;"></span>
<span style="font-family: Calibri;"></span></div>
<br>

<table style="text-align: left; width: 100%;" border="1"
 cellpadding="2" cellspacing="2">

  <tbody>
    <tr>
      <td>


      <style type="text/css">

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

#galerie_mini
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}

#galerie_mini li
{
display: inline;
}

#galerie_mini li a img
{
margin: 2px 1px ;
border: 1px solid #dcb ;
}

#photo
{
clear: both ;
margin: 0 auto ;
}

#photo dt
{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;
}

#photo dd
{
margin: 0 ;
}

#photo img
{
border: 1px solid #dcb ;
}
      </style>


      <div id="galerie" style="text-align: center;">
      <ul id="galerie_mini">
        <li><a href="images/Terrebattue.jpg"
 title="Terre battue"><img
 src="images/minis/terrebattue.jpg" alt="Terre Battue"></a></li>


        <li><a href="images/capitalistes.jpg"
 title="Capitalistes"><img
 src="images/minis/capitalistes.jpg" alt="Capitalistes"></a></li>


        <li><a href="images/photo3.png"
 title="Titre de la photo 3"><br>
          </a></li>

      </ul>

      <dl id="photo">
        <dt>Terre Battue</dt>
        <dd><img id="big_pict"
 src="images/Terrebattue.jpg" alt="TerreBattue"></dd>
      </dl>

      </div>
      </td>
    </tr>
  </tbody>
</table>
<br>
<br>
<br>
</body>
</html>


NB : j'ai remplacé liens par liens(i) uniquement pour une question de mise en page sur ce post : c'était en italique sinon !
Modifié par Papa (29 Nov 2007 - 20:57)
Je vois que tu as été faire un tour sur les règles Smiley cligne

J'ai la sensation que ton code est un peu mis à l'arrache là...

Je pense que ce tuto t'aidera à y mettre de l'ordre et te fera prendre de bons reflex en ce qui concerne la construction d'une page web.
Tu verras que beaucoup d'erreurs seront évitées.

A+
Modifié par Ipszy (29 Nov 2007 - 19:42)
Maintenant que j'ai tout bien suivi les conseil d'Ipszy, y'aurait-il quelqu'un qui voit l'erreur ?
Je suis sûr que ce n'est pas grand chose, mais je n'arrive pas à voir quoi.
Hello Papa (Tango Charly) Smiley cligne ,

la façon dont tu déclares ton javascript est étrange Smiley rolleyes : tu écris <script type="text/javascript" src="script.js"> pour faire référence à un script externe qui devrait s'appeller script.js mais tu écris ton script directement dans la page Smiley murf .

Soit il faut écrire 
<script type="text/javascript" src="script.js"></script>
et créer une autre page qui contient le script.

Soit il faut écrire 
<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
		};
	}
}
window.onload = displayPics;
</script>

A+ Smiley smile [/i]
Merci beaucoup Heyoan parce que ça marche !

Je ne connaissais pas cette histoire de src qui signifie que le javascript est sur une autre page... ce serait peut-être à préciser dans le tuto !

A ceux qui rencontreraient le même problème : n'oubliez pas le i entre crochet juste après 
liens
et juste avant 
.onclick
le tout sans espace.
Sujet clos
Aller à