Pour commencer, créez un dossier que vous nommerez photos à la racine de votre site. Placez-y les photos que vous souhaitez voir apparaître dans votre galerie.
Pensez à mettre la bonne source pour vos images.
<div id="gallery"> <em id="thumbs"> <a href="#nogo"> <img src="photos/1.jpg" /></a> <a href="#nogo"> <img src="photos/2.jpg" /></a> <a href="#nogo"> <img src="photos/3.jpg" /></a> <a href="#nogo"> <img src="photos/4.jpg" /></a> <a href="#nogo"> <img src="photos/5.jpg" /></a> <a href="#nogo"> <img src="photos/6.jpg" /></a> <a href="#nogo"> <img src="photos/7.jpg" /></a> <a href="#nogo"> <img src="photos/8.jpg" /></a> <a href="#nogo"> <img src="photos/9.jpg" /></a> <a href="#nogo"> <img src="photos/10.jpg" /></a> <a href="#nogo"> <img src="photos/11.jpg" /></a> <a href="#nogo"> <img src="photos/12.jpg" /></a> <a href="#nogo"> <img src="photos/13.jpg" /></a> <a href="#nogo"> <img src="photos/14.jpg" /></a> <a href="#nogo"> <img src="photos/15.jpg" /></a> <a href="#nogo"> <img src="photos/16.jpg" /></a> <a href="#nogo"> <img src="photos/17.jpg" /></a> <a href="#nogo"> <img src="photos/18.jpg" /></a> </em> </div>
Et enfin la feuille de style que vous pouvez joindre en lien dans l'entête de votre page ou alors fusionnez avec votre feuille de style existante.
<link rel="stylesheet" type="text/css" href="photo_simple.css" />
body { background-color:#000; width:800px; height:400px; } #gallery { position:relative; width:750px; } #thumbs { width:180px; float:left; } #thumbs a { display:block; float:right; width:50px; height:50px; margin:0 0 5px 5px; } #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; }
Voilà ! Savourez votre galerie CSS