18041 sujets

Questions générales et questions de débutants

Comment créer une galerie d'images en CSS ?

Bonjour,

Je suis nouvelle sur le forum et débute de manière général dans les langages XHTML et CSS, du coup je me trouve vite confrontée à des problèmes.

Celui que je ne parviens pas à résoudre actuellement est le suivant Smiley bawling : 

je souhaiterais créer une galerie d'images qui permet, au survol de la souris, d'afficher chaque petite image en plus grand à côté, dans un cadre, sur la même page. Les petites images (product-pt-vignette) sont regroupées dans un tableau qui est situé à gauche de la page, tandis que la zone où l'image doit apparaître en plus grand (product-gd-vignette) est située à 1 cm environ du tableau des petites vignettes.


Je joins l'extrait du code qui me pose problème : 

 

<!-- code placé dans head-->
<style type="text/css">
#tableau-produits { width:300px; border:none; margin:0px; border-color:#FCC; margin-left:34px; margin-top:40px;} 
#agrandissement-produits { width:auto; border:none; margin:0px; border-color:#FCC; margin-left:362px; margin-top:-298px; max-height:300px;} 

td { border:solid 1px; border-color:#FCC; font-family:Arial, Helvetica, sans-serif; font-size:9px;} 
.td-legende { border:none;}
</style>


<!-- code placé dans body-->
 <div id="tableau-produits">
      
      <table width="300px" cellpadding="0" cellspacing="10">
           <tr>
             <td><a href="#"><img src="medias/product-pt-vignette-1.gif" width="84" height="84" alt="bijoux untel" border="0" /></a></td>
             <td><a href="#"><img src="medias/product-pt-vignette-2.gif" width="84" height="84" alt="bijoux untel" border="0" /></a></td>
             <td><a href="#"><img src="medias/product-pt-vignette-3.gif" width="84" height="84" alt="bijoux untel" border="0" /></a></td>
           </tr>
           <tr>
             <td><a href="#"><img src="medias/product-pt-vignette-4.gif" width="84" height="84" alt="bijoux untel" border="0" /></a></td>
             <td><a href="#"><img src="medias/product-pt-vignette-5.gif" width="84" height="84" alt="bijoux untel" border="0" /></a></td>
           </tr>
      </table> 
      </div> 
      
   <div id="agrandissement-produits">
      
       <table width="50px" cellpadding="0" cellspacing="10">
            <tr><td align="left" height="276px"><img src="medias/product-gd-vignette-1.gif" width="276" height="272" alt="agrandissement bijoux untel" border="0" /></td></tr>
            <tr><td align="left" class="td-legende">Légende : description du produit 1</td></tr>
       </table>
  </div>


Pensez-vous que ce soit possible de réaliser cette galerie d'images en CSS ?

Merci d'avance de votre aide car là je suis bloquée,
cordialement. upload/28971-Image23.png
Modifié par alex100dra (17 Apr 2010 - 11:10)
Mikachu a écrit :
Salut et bienvenue à toi,

En parcourant les nombreuses ressources de la section Apprendre" tu aurais pu trouver ceci :
Galerie photo avec JavaScript, qui devrait répondre à ton besoin. Libre à toi d'adapter ensuite la CSS pour la présenter comme tu le souhaite. Smiley cligne



Bonjour Mikachu et merci de m'avoir répondu aussi vite.
Pour tout te dire, je suis déjà allée sur cette page pour essayer de refaire l'exercice avec mes propres photos, mais je n'ai pas réussi à franchir les 1ères étapes de structuration de la page en xhtml et de mise en forme en css (avant même d'aborder la partie en javasript !). En effet, lorsque je veux tester ce premier résultat, ça ne marche pas car les photos s'affichent dans d'autres fenêtres au lieu de s'afficher sur la même page, à coté des images en petit format.

Voici le code que j'ai écrit : 


<!-- dans la partie head-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<style type="text/css"> 

body { margin:0; padding:0; font:0.9em Georgia, serif;}
h1 { margin:15px 10px; text-decoration:underline; color:#dcb;}
p { line-height:1.5em; text-indent:1em; margin:15px 10px;}

div#galerie { width:450px; background-color:#FFF; border:1px solid #F69; padding:15px; margin: 15px 30px; text-align:left;} 

ul#galerie_mini { margin:0; padding:0; list-style-type:none;} 

ul#galerie_mini li { float:left;} 

ul#galerie_mini li a img { margin:5px 10px;} 

dl#photo { clear:both; margin:0 auto;} 

dl#photo dd { margin:0;} 

dl#photo dt { font-style:italic 9px arial; color:#000;} 

dl#photo img { border: 2px solid #FCC;}

</style>

<title>Test - Galerie d'images</title>
</head>


<!-- dans la partie body-->
<body> 

<!-- galerie d'images en petit format-->
<div id="galerie">

   <ul id="galerie_mini">
     <li><a href="medias/product-gd-vignette-1.gif"><img src="medias/product-pt-vignette-1.gif" width="84px" height="84px" alt="" /></a></li>
     <li><a href="medias/product-gd-vignette-2.gif"><img src="medias/product-pt-vignette-2.gif" width="84px" height="84px" alt="" /></a></li> 
     <li><a href="medias/product-gd-vignette-3.gif"><img src="medias/product-pt-vignette-3.gif" width="84px" height="84px" alt="" /></a></li> 
     <li><a href="medias/product-gd-vignette-4.gif"><img src="medias/product-pt-vignette-4.gif" width="84px" height="84px" alt="" /></a></li>
     <li><a href="medias/product-gd-vignette-5.gif"><img src="medias/product-pt-vignette-5.gif" width="84px" height="84px" alt="" /></a></li> 
  </ul>

<!-- image en grand format-->
 
<dl id="photo">
  <dd><img id="big_pict" src="medias/product-gd-vignette-1.gif" alt="Photo 1 en taille normale" /></dd> 
  <dt>Légende de la photo 1</dt>
</dl>

</div>
 

</body>
</html>



J'ai gardé ce qui était dans l'exercice: 
<dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>


À ce sujet, je ne sait pas à quoi correspond exactement [id="big_pict"], je n'ai rien trouvé dans le reste du code qui s'y rapporte (est-ce normal ?).

J'ai juste adapté cette ligne en mettant ma 1ère photo en grand format intitulée "product-gd-vignette-1.gif" qui est dans mon dossier "medias" :
<dd><img id="big_pict" src="medias/product-gd-vignette-1.gif" alt="Photo 1 en taille normale" /></dd>


Je pense que c'est dans cette partie du code que cela ne va pas, mais je ne sais quoi exactement. Est-ce que tu pourrais m'aider à comprendre ?

Merci encore,
cordialement.
Modifié par alex100dra (17 Apr 2010 - 21:01)
Salut,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif
Mikachu a écrit :
Salut,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif



Désolée, j'ai modifié l'affichage du code, je pense que c'est mieux comme ça. J'espère que je pourrais trouver de l'aide car je suis au point mort !
Sujet clos
Aller à