Le code XHTML

<div id="galerie">
	<ul id="galerie_mini">
		<li><a href="images/photo1.png" title="Titre de la photo 1">
      <img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" />
      </a>
  </li>

		<li><a href="images/photo2.png" title="Titre de la photo 2">
      <img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" />
      </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>

	
	<dl id="photo">
		<dt>Titre de la photo 1</dt>
		<dd><img id="big_pict" src="images/photo1.png" 
             alt="Photo 1 en taille normale" /></dd>
	</dl>
</div>

Pour commencer, il est intéressant de voir comment structurer le code XHTML afin d'agir dessus, il s'agira de présenter les miniatures sous forme de liste non ordonnée et d'ajouter ensuite une zone pour l'image en taille réelle.