18041 sujets

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

Galerie photo ne fonctionnant pas sous IE [résolu]

Bonjour,

J'ai un petit probleme avec ma galerie photo qui ne veut pas fonctionner sous IE.
Je l'ai quelque peut amélioré pour pouvoir avoir une "double galerie". Une liste d'image se chargeant sur une grosse mage en haut une autre liste d'image se chargant sur une grosse image en haut en dessous de la premiere.
Je vous mets la page cela sera plus explicite : http://www.horse-attitude.com/crea_tapis.php

Tout fonctionne parfaitement sous mozilla mais sous IEj'ai une image qui ne veut pas et m'ouvre la petite etiquette dans une autre page Smiley decu

Voici mon script :

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
  }
 }
 
 
 
 var photos2 = document.getElementById('galerie_mini2') ;
 // On récupère l'élément ayant pour id galerie_mini
 var liens2 = photos2.getElementsByTagName('a') ;
 // On récupère dans une variable tous les liens contenu dans galerie_mini
 var big_photo2 = document.getElementById('big_pict2') ;
 // 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_photo2 = document.getElementById('photo2').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 < liens2.length ; i++) {
  // Au clique sur ces liens  
  liens2[i].onclick = function() {
   big_photo2.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
   big_photo2.alt = this.title; // On change son titre
   titre_photo2.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;


Et ma page php :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cavalier - Horse Attitude</title>
<meta name="Description" content="sellerie en ligne fabrication textile pour chevaux et poneys" />
<meta name="Keywords" content="tapis de selle, chemise, couverture, couvre rein, bonnet, amortisseur, kit licol, gant de pansage, nasaline, muselaine, mouton veritable, bandes de polo, protections, cheval, sellerie en ligne, horse attitude, poney, fourreaux, frontal, tapis de surfaix, équitation, protections, " />
<meta name="Author" content="Horse Attitude" />
<meta name="Publisher" content="Horse Attitude" />
<meta name="Copyright" content="Horse Attitude" />
<meta name="Content-language" content="fr" />
<style type="text/css">
<!--
.Style1 {font-size: small;	color: #000000;	font-family: Verdana, sans-serif;}
.Style2 {font-size: medium; font-weight: bold; color: #36451E; }
.Style3 {font-size: large; font-weight: bold; color: ##693F13; }
.Style4 {font-weight: bold; font-size: large; color: #464942; }
 -->
	  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: 0px solid #dcb ; }  
	  dl#photo { clear: both ; margin: 0 auto ; }  dl#photo img { border: 0px solid #dcb ; }
	  ul#galerie_mini2 { margin: 0 ; padding: 0 ; list-style-type: none ; }  ul#galerie_mini2 li { float: left ; }  ul#galerie_mini2 li a img { margin: 2px 1px ; border: 0px solid #dcb ; }  dl#photo2 { clear: both ; margin: 0 auto ; }  dl#photo2 img { border: 0px solid #dcb ; }

	  </style>
<script type="text/javascript" src="script1.js"></script>
</head>
<body bgcolor="F9F8F4" link="#000066" vlink="#002066">
<table width="100%" height="413" border="0" cellpadding="2" cellspacing="1" align="center" bgcolor="#FEFBEC">
	<tr>
		<td>
    <table width="100%" border="0" cellpadding="3" cellspacing="1">
<table width="100%" cellpadding="4" cellspacing="0" >
				<tr> 
					<td > <div align="center"><a href="../index.php"><img src="Images/tapis.jpg"  width="800" height="172" border="0" /></a> 
						</div>
					</td>
				</tr>
			</table>
<table width="100%" cellpadding="4" cellspacing="0" background="Images/barre_tapis.jpg" class="Style1" align="center">
<tr><td><div><b><a href="http://www.horse-attitude.com/index.php">Accueil</a></b></div></td>
					<td><div><b><a href="http://www.horse-attitude.com/tapis.php">Tapis</a></b></div></td>
					<td><div><b><a href="http://www.horse-attitude.com/mouton.php">Mouton</a></b></div></td>
					<td><div><b><a href="http://www.horse-attitude.com/couvrantes.php">Couvrantes</a></b></div></td>
					<td><div><b><a href="http://www.horse-attitude.com/protections.php">Protections</a></b></div></td>
					<td><div><b><a href="http://www.horse-attitude.com/frontaux.php">Frontaux</a></b></div></td>
					<td><div><b><a href="http://www.horse-attitude.com/bonnet.php">Bonnets</a></b></div></td>
					<td><div><b><a href="http://www.horse-attitude.com/sellerie.php">Sellerie</a></b></div></td>
					<td><div><b><a href="http://www.horse-attitude.com/cavalier.php">Cavalier</a></b></div></td>
					<td><div><b><a href="http://www.horse-attitude.com/chiens.php">Chiens</a></b></div></td>
					<td><b><a href="http://www.horse-attitude.com/catalog/index.php">Boutique</a></b></td>
<td><b><a href="http://www.horse-attitude.com/contact.php">Contact</a></b></td>
				</tr>
			</table>
			<table width="100%" cellpadding="4" cellspacing="0" >
				<tr> 
					<td width="100%" rowspan="2" valign="top" >
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr>
<td width="3%" valign="top"><img src="Images/onglet_tapis.jpg" alt="Header" width="36" height="200" border="0" /></td>

<td width="100%"><blockquote>
<p align="center" class="Style4">Nuancier</p>
<p align="center" class="Style1"><i><font color="#666666" size="-1">Cliquez sur la miniature pour la voir en grand</font></i><br /></p>
<div id="galerie" align="center">

<dl id="photo">
<?php
echo "<dd><img id=\"big_pict\" src=";
echo "\"Images/creatapis/Cu323G.jpg\""; //adresse de l'image par défaut
echo " width=\"350\" height=\"200\" border=\"0\"/></dd>";//taille de l'image par défaut
echo " <dt class=\"Style3\"></dt>";//légende par défaut
?>
</dl>
<dl id="photo2">
<?php
echo "<dd><img id=\"big_pict2\" src=";
echo "\"Images/creatapis/B63G.jpg\""; //adresse de l'image par défaut
echo " width=\"350\" height=\"100\" border=\"0\"/></dd>";//taille de l'image par défaut
echo " <dt class=\"Style3\"> </dt>";//légende par défaut

?>
</dl>

<ul id="galerie_mini"><p>Nuancier tissus</p>
                        <li>
                        <a href="Images/creatapis/Cu323G.jpg" title="Bleu nuit">
                          <img src="Images/creatapis/Cu323.jpg" alt="Bleu nuit" border="0" /></a></li>
						<li>
                        <a href="Images/creatapis/Cu341G.jpg" title="Bleu petrole">
                          <img src="Images/creatapis/Cu341.jpg" alt="Bleu petrole" border="0" /></a></li>
                        <li>
                        <a href="Images/creatapis/Cu322G.jpg" title="Bleu roi">
                          <img src="Images/creatapis/Cu322.jpg" alt="Bleu roi" border="0" /></a></li>
			  <li>
 </ul><br/><p>Nuancier Liser&eacute;</p>
<ul id="galerie_mini2">
                        <li>
                        <a href="Images/creatapis/B14G.jpg" title=" ">
                          <img src="Images/creatapis/B14.jpg" alt="B14" border="0" /></a></li>
						<li>
                        <a href="Images/creatapis/B01.jpg" title=" ">
                          <img src="Images/creatapis/B01.jpg" alt="B01" border="0" /></a></li>
                        <li>
                        <a href="Images/creatapis/B75G.jpg" title=" ">
                          <img src="Images/creatapis/B75.jpg" alt="B75" border="0" /></a></li>
 </ul>
                     </div>
                  
                      </blockquote>
</td>
</tr></table>
  <table width="100%" cellpadding="4" cellspacing="0" >
				<tr>
					<td height="27" background="Images/barre_tapis.jpg"></td>
				</tr>
			</table>
<table width="100%" cellpadding="4" cellspacing="0" >
<tr><td width="100%" rowspan="2" valign="top" align="center" class="Style1" ><p>
<center>Copyright &copy; 2007 <a href="http://www.horse-attitude.com/" target="_blank">Horse
Attitude</a>
</center>
</p></td></tr></table></td></tr></td></tr>
</table>
</body>
</html>

PS j'ai enlevé ici pas mal d'image pour que le code page rentre Smiley smile [/i][/i]
Modifié par Utopie (23 Nov 2007 - 08:25)
Bonsoir Utopie,

Je ne suis pas un spécialiste es javascript, je procède par tatonnement et de façon logique (enfin j'essaie... Smiley lol ), il semble que tu aies omis le double slash sur cette partie du code :
[#red]//[/#]titre_photo2.firstChild.nodeValue = this.title; // On change le texte de titre de la photo

En les remettant, tout fonctionne sous IE6, IE7 et ne change rien sous Firefox...ne me demande pas de t'expliquer, j'en suis incapable Smiley decu

Petite erreur également ici :
.Style3 {font-size: large; font-weight: bold; color: [#red]#[/#]#693F13; }

Surement un de trop Smiley cligne

Le validateur du W3C semble avoir quelques soucis avec tes pages, il peut s'avérer interessant d'avoir un code valide et respectant les standards (accessibilité, référencement, etc...)
Il y a sans doute moyen d'éviter d'utiliser des tableaux pour la mise en page, mais c'est un choix que tu devras faire, ou non (il semblerait que ce site dispose de "quelques bons tutoriels"...mais chut !!!) Smiley cligne

Bonne continuation,
Cdt,
Sylvain
Bonjour,

En effet cela fonctionne maintenant Smiley biggrin Merci!!
Le dièse c pas trop grave ca lol.

Pour le validateur oui je sais qu'il est loin d'être ok. Mais je n'ai pas trop le temps pour le moment de changer tout ca. Déjà j'ai fait énormément de changement depuis qu'il est commencé... Mais dès que "tout" sera un peu plus en place j'ai l'intention de m'attarder sur les détails Smiley cligne
Niveau référencement y'a pas de soucis je suis plutôt bien placé pour le moment Smiley smile

Merci beaucoup en tout cas.
Sujet clos
Aller à