Bonjour,

J'ai un provlème avec ma galerie photo. Tout fonctionne à part lorsque je change d'image, le titre ne change pa. J'ai beau regarder dans tous les sens je ne comprends pas ce que j'ai loupé.

Je vous mets ma page php :

a écrit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Horse Attitude - Tapis de selle - Galerie photos - Textiles sur mesure</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Language" content="fr" />
<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">
<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;}
-->
p
{
line-height: 1.5em ;
text-indent: 1em ;
margin: 15px 10px ;
}

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 img
{
border: 1px solid #dcb ;
}
</style>

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

<body bgcolor="F9F8F4" link="#000066" vlink="#000066">
<table width="808" height="496" align="center" bgcolor="#FEFBEC" >
<tr>
<td width="800" height="152"><a href="index.php"><img src="Images/Tapis.jpg" alt="Header" width="800" height="172" border="0" /></a></td>
</tr>
<tr>
<td height="27" background="Images/barre_tapis.jpg"><?php include 'Menu/menu.php'; ?></td>
</tr>
<tr>
<td height="285"><table width="800" border="0">
<tr>
<td width="42" height="289" valign="top"><a href="tapis.php"><img src="Images/onglet_tapis.jpg" alt="" width="42" height="200" border="0" /></a></td>
<td width="120" valign="top"><p>&nbsp;</p>
<p class="Style1">
</p>
<p class="Style1">&nbsp;</p>
<p class="Style1"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</p></td>
<td width="620"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<!-- @page { size: 21cm 29.7cm; margin: 2cm } P { margin-bottom: 0.21cm } -->
<BODY DIR="LTR">
<blockquote>
<p align="center" class="Style4"><font color="#6D3115">Galeries photos - Tapis de selle</font></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>
<table>
<div id="galerie" align="center" width="620">
<dl id="photo">
<dd><img id="big_pict" src="Images/Tapis/Galerie/PointeDress.jpg" alt="Photo 1 en taille normale" /></dd>
<dt class="Style3"><font color="#6D3115">Tapis forme dressage Tapita blanc</font></dt>

</dl>

<ul id="galerie_mini">
<li><a href="Images/Tapis/Galerie/PointeDress.jpg" title="Tapis forme dressage Tapita Blanc"><img src="Images/Tapis/Galerie/PointeDress.jpg" alt="Tapis forme dressage Tapita Blanc" width="150" height="113" border="0" /></a></li>
<li><a href="Images/Tapis/Galerie/Bleu.jpg" title="Tapis Tapita Marine lisere ciel"><img src="Images/Tapis/Galerie/Bleu.jpg" alt="Tapis Tapita Marine lisere ciel" width="150" height="113" border="0"/></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>
</div>
</table>
<p align="justify">&nbsp; </p>
<blockquote>
<p align="justify">&nbsp;</p>
</blockquote>
<p align="justify" class="Style1">&nbsp;</p>
</blockquote></td>
<td width="200"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="32"><img src="Images/barre_tapis.jpg" alt="Header" width="800" height="30" border="0" /></td>
</tr>
</table>
<p align="center" class="Style1">
<?php include 'Menu/pied.php'; ?>
</p>
</body>
</html>
Salut Utopie Smiley cligne ,

A priori tu parles des titres affichés dans ton script.js mais à tout hasard tu pourrais essayer de mettre tes title dans la balise img et pas dans la balise a...

Et sinon il faudra montrer ton javascript.

A+ Smiley smile
Merci beaucoup, je viens d'essayer mais cela n'a rien changé Smiley decu

Le script java je n'ai pas changé par rapport à celui du tuto en fait Smiley confused

a écrit :
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.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;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
Oups Smiley confused ,

je n'avais pas fais gaffe mais on est dans le salon des tutoriels Smiley ravi :

Quoi qu'il en soit, ton code javascript n'est pas exactement le même que celui qui est donné sur cette page : il manque un [ i] (sans espace) dans
liens[ i].onclick = function() {
et tu as un ; en trop après ta première accolade fermante.

A+ Smiley smile

*Edit: Et tu as écrit ++i à la place de i++
Modifié par Heyoan (14 Jul 2007 - 13:27)
Smiley decu

J'ai beau changer ce que vous me dites rien ne change.

Voilà le script :

a écrit :
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;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page

(J'ai mis un espace au I entre crochet sinon il ne s'affiche pas et mets les choses en italique)


Voilà la page :

a écrit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Horse Attitude - Tapis de selle - Galerie photos - Textiles sur mesure</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Language" content="fr" />
<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">
<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;}
-->
p
{
line-height: 1.5em ;
text-indent: 1em ;
margin: 15px 10px ;
}

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 img
{
border: 1px solid #dcb ;
}
</style>

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

<body bgcolor="F9F8F4" link="#000066" vlink="#000066">
<table width="808" height="496" align="center" bgcolor="#FEFBEC" >
<tr>
<td width="800" height="152"><a href="index.php"><img src="Images/Tapis.jpg" alt="Header" width="800" height="172" border="0" /></a></td>
</tr>
<tr>
<td height="27" background="Images/barre_tapis.jpg"><?php include 'Menu/menu.php'; ?></td>
</tr>
<tr>
<td height="285"><table width="800" border="0">
<tr>
<td width="42" height="289" valign="top"><a href="tapis.php"><img src="Images/onglet_tapis.jpg" alt="" width="42" height="200" border="0" /></a></td>
<td width="120" valign="top"><p>&nbsp;</p>
<p class="Style1">
</p>
<p class="Style1">&nbsp;</p>
<p class="Style1"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</p></td>
<td width="620"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<!-- @page { size: 21cm 29.7cm; margin: 2cm } P { margin-bottom: 0.21cm } -->
<BODY DIR="LTR">
<blockquote>
<p align="center" class="Style4"><font color="#6D3115">Galeries photos - Tapis de selle</font></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>
<table>
<div id="galerie" align="center" width="620">
<dl id="photo">
<dd><img id="big_pict" src="Images/Tapis/Galerie/PointeDress.jpg" alt="Photo 1 en taille normale" width="350" height="290" border="0"/></dd>
<dt class="Style3"><font color="#6D3115">Tapis forme dressage Tapita blanc</font></dt>

</dl>

<ul id="galerie_mini">
<li><a href="Images/Tapis/Galerie/PointeDress.jpg" title="Tapis forme dressage Tapita Blanc"><img src="Images/Tapis/Galerie/PointeDress.jpg" alt="Tapis forme dressage Tapita Blanc" width="150" height="113" border="0" /></a></li>
<li><a href="Images/Tapis/Galerie/Bleu.jpg" title="Tapis Tapita Marine lisere ciel"><img src="Images/Tapis/Galerie/Bleu.jpg" alt="Tapis Tapita Marine lisere ciel" width="150" height="113" border="0"/></a></li>
<li><a href="Images/Tapis/Galerie/Rougor.jpg" title="Tapis Tapita rouge galon or"><img src="Images/Tapis/Galerie/Rougor.jpg" alt="Tapis Tapita rouge galon or" width="150" height="113" border="0"/></a></li>
<li><a href="Images/Tapis/Galerie/Krown.jpg" title="Tapis Lotina ecossais lisere ciel passe poil marron"><img src="Images/Tapis/Galerie/Krown.jpg" alt="Tapis Lotina ecossais lisere bleu passe poil marron" width="150" height="113" border="0"/></a></li>
<li><a href="Images/Tapis/Galerie/Turquoise.jpg" title="Tapis Lotina suedine turquoise lisere noir double cordelette"><img src="Images/Tapis/Galerie/Turquoise.jpg" alt="Tapis Lotina suedine turquoise lisere noir double cordelette" width="150" height="113" border="0"/></a></li>
<li><a href="Images/Tapis/Galerie/passepoil.jpg" title="Tapis Lotina ecossais lisere marron passe poil bleu"><img src="Images/Tapis/Galerie/passepoil.jpg" alt="Tapis Lotina ecossais liseré marron passe poil bleu" width="150" height="113" border="0"/></a></li>
<li><a href="Images/Tapis/Galerie/DoubleLiseré.jpg" title="Tapis Mariva fushia double lisere noir"><img src="Images/Tapis/Galerie/DoubleLiseré.jpg" alt="Tapis Mariva fushia double lisere noir" width="150" height="113" border="0" /></a></li>
<li><a href="Images/Tapis/Galerie/F.jpg" title="Tapis Lotina bordeaux lisere gris"><img src="Images/Tapis/Galerie/F.jpg" alt="Tapis Lotina bordeaux lisere gris" width="150" height="113" border="0"/></a></li>
<li><a href="Images/Tapis/Galerie/Frison.jpg" title="Tapis Tapita noir lisere blanc"><img src="Images/Tapis/Galerie/Frison.jpg" alt="Tapis Tapita noir lisere blanc" width="150" height="113" border="0"/></a></li>
<li><a href="Images/Tapis/Galerie/Gris.png" title="Tapis Tapita gris lisere rose brodé"><img src="Images/Tapis/Galerie/Gris.png" alt="Tapis Tapita gris lisere rose brodé" width="150" height="113" border="0"/></a></li>
<li><a href="Images/Tapis/Galerie/Jaunepointe.jpg" title="Tapis Tapita jaune"><img src="Images/Tapis/Galerie/Jaunepointe.jpg" alt="Tapis Tapita jaune" width="150" height="113" border="0"/></a></li>
<li><a href="Images/Tapis/Galerie/M.jpg" title="Tapis Lotina marron lisere ciel"><img src="Images/Tapis/Galerie/M.jpg" alt="Tapis Lotina marron lisere ciel" width="150" height="113" border="0"/></a></li>
</ul>
</div>
</table>
<p align="justify">&nbsp; </p>
<blockquote>
<p align="justify">&nbsp;</p>
</blockquote>
<p align="justify" class="Style1">&nbsp;</p>
</blockquote></td>
<td width="200"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="32"><img src="Images/barre_tapis.jpg" alt="Header" width="800" height="30" border="0" /></td>
</tr>
</table>
<p align="center" class="Style1">
<?php include 'Menu/pied.php'; ?>
</p>
</body>
</html>


et voilà ce que ca donne :

http://www.horse-attitude.com/galerie-tapis.php

Le titre ne change pour aucune images ca m'agace cette histoire Smiley fache
Re',

ça ne fonctionne pas à cause de tes balises <font> et </font> dans ta balise <dt>... Si tu veux modifier la couleur du texte tu n'as qu'à mettre directement :
.Style3 {font-size: large; font-weight: bold; color: #6D3115; }
(Amis de Dreamweaver Bonjour ! Smiley ravi ).

En passant, tu devrais (re)lire le tuto sur les include car dans ton code il y a 3 balises <html>, 3 balises <body>, etc, etc... Smiley cligne

A+
Salut,

bon dans ceci extrait de ton code :

a écrit :


<dl id="photo">
<dd><img id="big_pict" src="Images/Tapis/Galerie/PointeDress.jpg" alt="Photo 1 en taille normale" /></dd>
<dt class="Style3"><font color="#6D3115">Tapis forme dressage Tapita blanc</font></dt>

</dl>



1. Déjà je ne vois pas trop ce que signifie de mettre le <dt> après le <dd>, on utilise les liste de définitions ou on ne les utilise pas mais quand on le fait, on le fait bien.

2. Le problème vient de la balise <font> parce que le code JS traite le :

titre_photo.firstChild.nodeValue


Ce firstChild doit être le contenu texte du <dt> et chez toi c'est <font>


Ah au fait ça sort d'où ça <font> ??? Smiley lol


Smiley bawling Smiley bawling Smiley bawling Heyoan I m'a grilled comme une sardine du port de concarneau un jour de barbecue Smiley lol
Modifié par Christian Le Bouler (14 Jul 2007 - 14:10)
Christian Le Bouler a écrit :
Smiley bawling Smiley bawling Smiley bawling Heyoan I m'a grilled comme une sardine du port de concarneau un jour de barbecue Smiley lol
J'allais justement te le faire remarquer ! Smiley err
Heyoan a écrit :
Re',

ça ne fonctionne pas à cause de tes balises <font> et </font> dans ta balise <dt>... Si tu veux modifier la couleur du texte tu n'as qu'à mettre directement :
.Style3 {font-size: large; font-weight: bold; color: #6D3115; }
(Amis de Dreamweaver Bonjour ! Smiley ravi ).

En passant, tu devrais (re)lire le tuto sur les include car dans ton code il y a 3 balises <html>, 3 balises <body>, etc, etc... Smiley cligne

A+

oki merci je vais essayer.

Pour les body et compagnie ca je ne sais pas trop à vrai dire ce n'ets pas moi qui ai commencé mon site. Donc je m'appuie sur le support que l'on m'avait commencé pour continuer à avancer le site en attendant que la fille qui m'aide puisse recontinuer.

J'y regarderait de plus près lors des finitions je pense. Smiley biggrin
Christian Le Bouler a écrit :
Salut,

bon dans ceci extrait de ton code :



<dl id="photo">
<dd><img id="big_pict" src="Images/Tapis/Galerie/PointeDress.jpg" alt="Photo 1 en taille normale" /></dd>
<dt class="Style3"><font color="#6D3115">Tapis forme dressage Tapita blanc</font></dt>

</dl>



1. Déjà je ne vois pas trop ce que signifie de mettre le <dt> après le <dd>, on utilise les liste de définitions ou on ne les utilise pas mais quand on le fait, on le fait bien.

2. Le problème vient de la balise <font> parce que le code JS traite le :

titre_photo.firstChild.nodeValue


Ce firstChild doit être le contenu texte du <dt> et chez toi c'est <font>


Ah au fait ça sort d'où ça <font> ??? Smiley lol


Smiley bawling Smiley bawling Smiley bawling Heyoan I m'a grilled comme une sardine du port de concarneau un jour de barbecue Smiley lol

Pour mes dd et dt je voulais avoir ma grande image en haut donc en reprennant le code donné dans le tuto et en mettant dans mon ordre souhaité ca a donné ca Smiley rolleyes

En ce qui concerne les font comme je l'ai dit dnas le message précédent le "support" du site n'a pas été fait par moi même mais par une amie qui est en fac spécialisé informatique. Donc elle apprend tout ca en cours, donc j'imagine que ca ne doit pas sortir de nul part puis ca marche Smiley lol Smiley lol

Voilà

je vais essayer je vous dirais si j'ai un souci Smiley ohwell
Youpiiiiiiiiii!!!!!!!!!!!
Ca fonctionne !!!!


Merci beaucoup pour votre rapidité de réponse en tout cas car sur cerains forums j'aurai pu attendre quelques jours voir plus avant d'avoir une réponse ...


Smiley baiser Smiley baiser Smiley baiser