Soucis sur un script

Bonjour,

J'ai recupere un script qui permet de realiser une galerie dynamique, en affichant la photo et son commentaire par un survol par la souris. Ca marche tres bien :

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() {
		liens[i].onmouseover = 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;

avec en html

...
<div id="main_photo">

     <div id="galerie">     
        <dl id="photo">
	   <dt>TITRE</dt>
	   <dd><img id="big_pict" src="photo1.jpg" alt="commentaire photo1" width=450 /></dd>
	</dl>

	<ul id="galerie_mini">
	   <li><a href="photo2.jpg" title="titre photo2"><img src="sphoto_2.jpg" alt="photo2" width=100/></a></li>
           <li><a href="photo3.jpg" title="titre photo3"><img src="sphoto_3.jpg" alt="photo3" width=100/></a></li>
           <li><a href="photo4.jpg" title="titre photo4"><img src="sphoto_4.jpg" alt="photo4" width=100/></a></li>
	</ul> 
     </div>
   ...  

Je voudrais maintenant realiser la meme chose, mais avec plusieurs lignes de commentaires. J'ai tente ceci :

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_1 = document.getElementById('photo').getElementsByTagName('span')[0] ;
	var titre_2 = document.getElementById('photo').getElementsByTagName('span')[1] ;
	var titre_3 = document.getElementById('photo').getElementsByTagName('span')[2] ;
	var titre_4 = document.getElementById('photo').getElementsByTagName('span')[3] ;
	// 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() {
		liens[i].onmouseover = 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_1.firstChild.nodeValue = this.titre1;
			titre_2.firstChild.nodeValue = this.titre2; // On change le texte de titre de la photo
			titre_3.firstChild.nodeValue = this.titre3; // On change le texte de titre de la photo
			titre_4.firstChild.nodeValue = this.titre4;

			return false; // Et pour finir on inhibe l'action réelle du lien
		};
	}
}
window.onload = displayPics;

avec en html :

...
<div id="corps">
     <div id="galerie">     
        <div id="galerie_gauche">

           <ul id="galerie_mini">

            <table  border="0">
             <tr>
               <td><a href="../photos/photo1.jpg" 
                      titre1="ligne1" 
                      titre2="ligne2" 
                      titre3="ligne3" 
                      titre4="ligne4">
                   <img src="../photos/photo1.jpg" alt="photo1" height="87"></a>
               </td>
               <td><a href="../photos/photo2.jpg" 
                      titre1="ligne1" 
                      titre2="ligne2" 
                      titre3="ligne3" 
                      titre4="ligne4">
                   <img src="../photos/photo2.jpg" alt="photo2" height="87"></a>
               </td>
...
</table>

Qui marche bien sous IE, mais pas sous Firefox ou Netscape (pour une fois...).

Quelqu'un a-t-il un idee ? Je n'y connais rien en Javascript.

Le but est d'afficher 4 lignes de commentaires par photo, sur 4 lignes.

Merci pour votre aide.

PAI.[/i][/i][/i][/i]

Oups...

J'ai du taper sur une mauvaise touche, et j'ai envoye le sujet non termine.

Je reprends donc le code html qui ne fonctionne pas (ignorer celui dans le premier post).

..
<div id="corps">
     <div id="galerie">     
        <div id="galerie_gauche">

           <ul id="galerie_mini">

            <table  border="0">
             <tr>
               <td><a href="../photos/photo1.jpg" 
                      titre1="ligne1" 
                      titre2="ligne2" 
                      titre3="ligne3" 
                      titre4="ligne4">
                   <img src="../photos/photo1.jpg" alt="photo1" height="87"></a>
               </td>
              <td><a href="../photos/photo2.jpg" 
                      titre1="ligne1" 
                      titre2="ligne2" 
                      titre3="ligne3" 
                      titre4="ligne4">
                   <img src="../photos/photo2.jpg" alt="photo2" height="87"></a>
               </td>
...
              </table>
...
<div id="galerie_droit">

           <dl id="photo">
              <dd><img id="big_pict" src="../images/comete-8.gif" alt="comete-8"></dd>
	      <dt>
                 <span titre1="title1">l1</span>
                 <p><span titre2="title2"> l2 </span>
                 <p><span titre3="title3"> l3 </span>
                 <p><span titre4="title4"> l4 </span>
             </dt>   
   	   </dl>

        </div>    
     </div>  <!-- Fin de div galerie -->

merci