18041 sujets

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

Créer un diaporama en html

Bonjour à tous,
Je cherche à créer un diaporama sur mon site. Je voudrais que lorsque l'on passe la souris sur une miniature, une image s'affiche à côté. Un peu comme ça : http://radservebeer.free.fr/tuto/css.alsacreations.com/effectcss/photo_simple.htm#nogo
Sauf que je voudrais que l'image qui s'affiche en grand soit différente de celle de la miniature. Quelqu'un peut -il m'expliquer comment cela peut-il se faire ? (je débute ...)

le code html, par RAD ZONE : 
<!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">
      </em>
    </div>
  </body>
</html>


Le code CSS, toujours par RAD ZONE : 

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;
}


Merci d'avance.
Adrien
Salut mpm48 »

Tourne toi vers JS » JQuery.
En CSS tu auras :hover qui peut être intéressant aussi. C'est sûrement ce qu'il fait dans l'exemple toutes les images étant entouré de l'élément <a href="#nomAncre">

Si tu veux un aperçu de son CSS : CSS de l'exemple » si c'est comme moi il devrait charger dans ton éditeur préférer.
..
Modifié par zardoz (15 Jul 2011 - 20:28)
Sujet clos
Aller à