Onglet en surbrillance depuis un passage de souris sur une image

Signaler
Messages postés
11
Date d'inscription
jeudi 7 septembre 2006
Statut
Membre
Dernière intervention
7 novembre 2007
-
Messages postés
316
Date d'inscription
jeudi 9 janvier 2003
Statut
Membre
Dernière intervention
1 février 2010
-
Bonjour,

Je viens à vous pour vous demander une astuce (en javascript, ou non). J'explique mon cas :

J'ai un menu (réalisé en CSS) avec deux petits onglets (lien 1 et lien 2). En mode normal, ces onglets ont une image en arrière-plan, et en mode "survolé", ces onglets ont une autre image. Bref, c'est un menu classique avec bouton.

A côté de mon menu en forme d'onglets, j'ai deux images (image 1 et image 2). C'est là que je pose ma question : lorsque je passe ma souris sur mon image 1, comment faire pour mettre mon onglet "lien 1" en mode "survolé" ?

Ce qui paraîtra mysterieux pour moi sera peut-être une évidence pour vous !

Merci pour vos éclairages.

Voici le code HTML :

<html>
    <head>
        <title> Comment faire apparaître le menu en surbrillance ? </title>
                <meta http-equiv="expires" content="0">
                    <link rel="stylesheet" media="screen" type="text/css" title="design" href="html3.css" />
    </head>  

       

            [#
Lien 1
]
            [#
Lien 2
]
       

   
            |
    |

</html>

et voici le code CSS :

body
{
background-color:white;
color:#222222;
font-family: "Verdana";
font-size:11px;
}

#menu
{
height: 20px;
float: left;
border: solid red 0px;
margin-left: 4px;
margin-top: 10px;
}

.onglet
{
width:103px;
height:20px;
text-align: center;
float: left;
border : solid 0px red ;
padding-top: 2px;
}

#menu a div
{
background-image:url("img/ongletup.png");
background-repeat: no-repeat;
color:white;
font-family: "Verdana";
font-weight: bold;
font-size: 10px;
text-decoration: none;
}

#menu a:hover div
{
background-image: url("img/ongletdown.png");
color:white;
font-family: "Verdana";
font-weight: bold;
font-size: 10px;
background-repeat: no-repeat;
text-decoration: none;
}

1 réponse

Messages postés
316
Date d'inscription
jeudi 9 janvier 2003
Statut
Membre
Dernière intervention
1 février 2010
1
N'ayant pas toute les images et compagnie, je me suis juste "amusé" a changer la couleur sur le hover ... la solution que j'apporte est plutot contraignante d'un point de vue CSS et si tu ne connais pas tres bien ce "langage", tu risques de te battre un peu avec le positionnement :p

<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="fr">
 <head> 
  <title> Comment faire apparaître le menu en surbrillance ? </title>
  <meta http-equiv="expires" content="0">
  
  <style type="text/css" media="screen">
  /* <![CDATA[ */
   #menu {
    position: relative;
    width: 350px;
   }
   #menu a span.onglet {    
    width: 150px;
    margin: 0 2px;
   }
   #menu a img.logo { /* c'est ici que tu fais les placements ... a toi de joue avec les float, les position absolute et compagnie ... */
    float:right;
    border: 2px ridge #999;
    margin: 1px; padding: 2px;
   }
   #menu a {
    color: red;
    text-decoration: none;
   }
   #menu a:hover span.onglet {
    color: green;
   }
  /* ]]> */
  </style>
 </head>  
  

   [
    Google
    http://www.google.com/images/firefox/google.gif" />
   
   [
    Exalead
    http://www.exalead.fr/apogee/fr/exa-small.gif" />
   
  

 
</html>

--------
Encore une petite remarque, n'utilises pas de tableau pour faire tes mises en page, le XHTML / CSS forment un tres beau couple ... http://www.alsacreations.com/ pour des tutoriaux plutot bien fait et pas trop chiants ... autant prendre de bonnes habitudes tout de suite :o)

--=Capoueidiablo=--