C S S
body {
    background-color: #000000
}
#gallery {
    position: relative;
    width: 750px;
}
#thumbs {
    width: 180px;
    float: left;
}
#thumbs a {
    display: block;
    float: right;
    margin: 0 0 5px 5px;
    width: 50px;
    height: 50px;
    border: 0px solid #000;
}
#thumbs a img {
    width: 50px;
    height: 50px;
    border: 0;
}
#thumbs a:hover {
    border-color: #ddd;
}
#thumbs a:hover img {
    position: absolute;
    width: auto;
    height: auto;
    left: 185px;
    top: 0;
    border: 1px solid #333;
}
H T M L
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>
    </title>
    <link rel="stylesheet" type="text/css" href="css/photo.css">
  </head>
  <body>
    <div id="gallery">
      <em id="thumbs">
        <a href="#nogo">
          <img src="images/image1.jpg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image2.jpg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image3.jpg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image4.jpg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image5.jpg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image6.jpg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image7.jpg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image8.jpg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image9.jpg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image10.jpg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image11.jpg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image12.jpg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image13.jpg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image14.jpg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image15.jpg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image16.jpgg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image17.jpg" title="" alt=""></a>
        <a href="#nogo">
          <img src="images/image18.jpg" title="" alt=""></a>
      </em>
    </div>
  </body>
</html>



Créer un site
Créer un site