begin process at 2010 03 21 16:49:22
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Onglet en surbrillance depuis un passage de souris sur une image


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Onglet en surbrillance depuis un passage de souris sur une image

mercredi 7 novembre 2007 à 07:48:02 | Onglet en surbrillance depuis un passage de souris sur une image

phelsuma

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>  

        <div id = "menu" >
            <a href="#"><div class="onglet">Lien 1</div></a>
            <a href="#" ><div class="onglet">Lien 2</div></a>
        </div>
   
        <table width="200" border="1"><tr>
    <th scope="col"><img src="http://www.google.com/images/firefox/google.gif"/></th>
    <th scope="col"><img src="http://www.exalead.fr/apogee/fr/exa-small.gif"/></th></tr></table>
</body>
</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;
}


lundi 12 novembre 2007 à 00:00:13 | Re : Onglet en surbrillance depuis un passage de souris sur une image

capoueidiablo

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"
    " [ Lien ]">
<html xmlns=" [ Lien ]" 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>  
  <div id="menu">
   <a href=" [ Lien ]" title="Le moteur de recherche dont la réputation n'est plus à faire ...">
    <span class="onglet">Google</span>
    <img class="logo" src=" [ Lien ]" />
   </a>
   <a href=" [ Lien ]" title="Go to Exalead, le moteur de recherche Francais qu'il est bien !!!">
    <span class="onglet">Exalead</span>
    <img class="logo" src=" [ Lien ]" />
   </a>
  </div>
 </body>
</html>

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

--=Capoueidiablo=--


Cette discussion est classée dans : menu, font, image, lien, background


Répondre à ce message

Sujets en rapport avec ce message

menu déroulant css [ par poucinette51 ] Bonjour, voilà j'ai créé un menu déroulant en css, mais n'étant encore pas trop expérimentée en css, je bloque sur un truc! En fait je voudrai que lor SOS - menu CSS [ par kristale ] Je suis complétement coincée!!!!!!J'ai fait un petit menu css et javascript, mais le relover de mon "menu1", "menu 2", menu 3" ne fontionne pas. J'aim Problème d'alignement avec mon menu déroulant [ par kristale ] Hello, j'aimerai mettre mon menu déroulant (javascript/css) dans une cellule d'un tableau, mais je n'y arrive pas. Comment faire? Ca me le mets automa integrer image arriere plan dans menu CSS [ par ju0123456789 ] Bonjour,je viens de mettre en place un menu avec sous menu, et mon probleme est que je voudrais integrer une image d'arriere plan, mais soit ce n'est  Menu glissant sous html ne fonctionne pas sous DOCTYPE XHTML [ par michof ] Bonjour,J'ai construit un petit menu glissant tout simple en CSS et javascript qui fonctionne très bien en HTML, mais sous XHTML il bloque. Le menu es Déroulement menu css et javascript [ par kristale ] Hello! j'ai un petit soucis avec mon menu déroulant. J'aimerai que les sous menus ne disparaissent pas quand on clique dessus, mais qu'ils restent.Et Relier un lien à une image. [ par yourima ] Bonjour à tous,Voila, je travaille sur un site à partir de Dreamweaver. Je suis un bon noob dans cela : /, c'est pourquoi j'appel à votre savoir.Ma qu Menu deroulant vertical, fonctions non compatibles avec internet explorer [ par maripaun2003 ] Bonjour, Je suis debutante en javascript. Pour mon site personnel j'ai crée un menu vertical deroulant avec le javascript. Voila mon probleme: quand o


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 10,265 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales