Re !
J’ai fait un petit truc, en espérant que ceci te convienne 
N’hésite surtout a faire part de tes remarques, modifier le code etc.
Spécification :
- Les photos doivent être placées dans un dossier nommé img et toutes renommées en photo_0.jpg, photo_1.jpg, photo_2.jpg etc (au besoin change le code si tu veux autre chose).
- Le fichier diapo.js se trouve à la racine.
Nota :
- Dans diapo.js, pense a changer le nombre max de photos dans la fonction faitDiapo().
- Dans index.htm, a rajouter les événements lors du click sur le nom de la pièce et a adapter le numéro passé en paramètre au numéro de la photo.
- Le diaporama ne s’arrête jamais, même si tu clique sur le nom d’une pièce pour la regarder.
- Lorsque tu clique sur le nom d’une pièce, l’image de la pièce reste plus longtemps “chargée” que dans le diaporama normal. Le diaporama reprend ensuite.
Contenu de index.htm (inutile de garder le .php vu qu’il n’y a plus de php ^^)
[code]<?xml version="1.0" encoding="UTF-8"?>
Immobilier - Duplex F3 - EPERNON
<!-- En-tête de la page -->
<h1>Vend appartement F3 en duplex - <span>169.000 €</span></h1>
<h2>EPERNON(28) à 45 min. de Montparnasse</h2>
<hr />
<!-- Corps de la page -->
<div id="diaporama">
<img id="diapo" src="img/photo_0.jpg" alt="diaporama" width="544" height="408" />
</div>
<div>
<p>
Appartement 3 pièces de style ancien avec poutres apparentes, vue sur étang et parc boisé, comprenant :
</p>
<ul>
<li onclick="changeDiapo(0)">salle à manger</li>
<li>grande cuisine aménagée</li>
<li onclick="changeDiapo(1)">2 chambres</li>
<li>salle de bain</li>
<li>toilette indépendante</li>
<li>cave</li>
</ul>
<ul>
<li><b>surface :</b> 67m<sup>2</sup> loi Carrez,</li>
<li><b>chauffage</b> au gaz,</li>
<li><b>accès</b> à la gare et aux commerces à pieds,</li>
<li><b>PAS DE CHARGE DE COPROPRIÉTÉ,</b></li>
<li><b>PRIX (sans frais d'agence) :</b> 169.000 € NÉGOCIABLE</li>
</ul>
</div>
<!-- Pieds de la page -->
<div id="bas">
<br />
<hr />
<p>site mis à jour en février 2008</p>
<p><a href="mailto:sebiseb(at)free(dot)fr">contactez nous</a></p>
</div>
[/code]
Contenu de style.css
[code]body {
width: 984px;
background: #ffffff;
color: #000000;
}
p {
text-indent: 16px;
text-align: justify;
}
a:link, a:visited, a:active {
color: #0000ff;
text-decoration: none;
}
a:hover {
color: #ff0000;
text-decoration: none;
}
h1 {
font-size: 36px;
font-weight: bold;
}
h1 span {
font-size: 36px;
font-weight: normal;
color: #990000;
}
h2 {
font-size: 36px;
font-weight: normal;
}
ul {
text-align: justify;
text-indent: 8px;
margin-left: 16px;
}
li {
margin-left: 16px;
}
ul + ul {
list-style-type: none;
}
#diaporama {
float: left;
text-align: center;
margin : 16px;
}
#bas {
clear: both;
text-align: center;
}
#bas p {
float: left;
text-align: left;
font-size: 10px;
}
#bas p + p {
float: right;
text-align: right;
font-weight: bold;
font-size: 1em;
}[/code]
Contenu de diapo.js
[code]var timer;
function faitDiapo(i)
{
document.getElementById(“diapo”).src=“img/photo_”+i+".jpg";
if (i >= 2)
i=0;
else
i++;
timer = setTimeout("faitDiapo("+i+")",4000);
}
function changeDiapo(i)
{
document.getElementById(“diapo”).src=“img/photo_”+i+".jpg";
clearTimeout(timer);
timer = setTimeout(“faitDiapo(”+i+")",4000);
}[/code]
(php étant côté serveur ça va être dur de toucher au dom ^^).