Partage
  • Partager sur Facebook
  • Partager sur Twitter

Changer image

en CSS

univscien
    2 novembre 2006 à 19:24:07

    Voilà, en fait le menu de mon site, c'est une succetion de 5 petites images alignée, qui envoient chaqu'une vers un lien différent.
    En fet je voudrais que lorsque le cursseur de la souris passe sur une des 5 image, une autre image apparait au méme endroit.
    Il y a donc 10 images. 5 d'origines, qui sont dans le menu, et 5 autres, qui devront apparaitre.
    Je me doute que cela n'est surement pas possible en CSS, mais si il ya un moyen, ce serait sympas de me le donner, parceque je n'est aucune notions en JavaScript. :)

    Voila ce que j'ais essayé.
    (en me doutant que çà ne marcherais pas)
    Mais si çà ce trouve, c'est presque juste, donc je vous montre:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
       <head>
           <title>Univers du TI Basic</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
           <link rel="stylesheet" media="screen" type="text/css" title="css" href="index.css" />
       </head>
       <body>

       <br \><br \><br \><br \><br \><br \><br \><br \><br \><br \><br \><br \><br \><br \>
       <br \><br \><br \><br \><br \><br \><br \><br \><br \><br \><br \>
     
       
    <center><span class="acceuil"><a href="acceuil.html"><img src="Acceuil1.jpg" alt=":)" /></a></span>

       <span class="forum"><a href="forum.html"><img src="Forum1.jpg" alt=":)" /></a></span>

       <span class="tutoriaux"><a href="tutoriaux.html"><img src="Tutoriaux1.jpg" alt=":)" /></a></span>

       <span class="livre"><a href="livre_or.html"><img src="Livre_d'or1.jpg" alt=":)" /></a></span>

       <span class="prgm"><a href="prgm.html"><img src="Prgm-taper1.jpg" alt=":)" /></a></span></center>
       
          </body>
    </html>


    body
    {
    background-image: url("Fond_Univers-TIbasicCOPIE2.jpg");
    }
    img
    {
    border: 0px;
    margin: 0px;
    padding: 0px;
    }
    .acceuil:hover
    {
    image: url("Acceuil.jpg")
    }
    .forum:hover
    {
    image: url("Forum.jpg")
    }
    .tutoriaux:hover
    {
    image: url("Tutoriaux.jpg")
    }
    .livre:hover
    {
    image: url("Livre_d'or.jpg")
    }
    .prgm:hover
    {
    image: url("Prgm-taper.jpg")
    }


    Donc voilà, si ya possibilitée de le faire en CSS, je prend :) , sinon et bé le code javascript ira je pence (si vous pouvez... ;) )
    • Partager sur Facebook
    • Partager sur Twitter
    Nico_n
    • HTML / CSS
    'Titi
    • HTML / CSS
      2 novembre 2006 à 19:48:25

      Je connais de cette façon :

      <a onmouseover="document.photo.src='imageA2.gif'" onmouseout="document.photo.src='imageA.gif'"href="destination.html" ><IMG src="imageA.gif" name="photo"></A>
      • Partager sur Facebook
      • Partager sur Twitter
      univscien
        2 novembre 2006 à 19:53:08

        Merci çà marche. :)
        • Partager sur Facebook
        • Partager sur Twitter
        'Titi
        • HTML / CSS
          2 novembre 2006 à 19:55:40

          Sinon j'ai encore ça :

          <a href="" class="changeimg"></a>


          .changeimg
          {
            cursor: pointer; /*pour ne pas afficher la main*/
            background-image: url('urldelimage1');
            width: 100px; /*largeur de l'image*/
            height: 100px; /*hauteur de l'image*/
          }
          .changeimg:hover
          {
            cursor: pointer;/*pour ne pas afficher la main*/
            background-image: url('urldelimage2');
            width: 100px; /*largeur de l'image*/
            height: 100px; /*hauteur de l'image*/
          }
          • Partager sur Facebook
          • Partager sur Twitter

          Changer image

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur ●
          • Markdown