Liens de mon menu

Discussion dans 'Web, design' créé par hoshi, 15 Août 2007.

Statut de la discussion:
Fermée.
  1. Offline
    hoshi Hoshi's Love
    Yop,
    voila j'aurais aimé savoir comenfaire pour que quand la souris passe sur un des liens de mon menu, la couleur du texte change, mais il y'aurait aussi une image en fond enfaite. Si quelqu'un avait une solution, de préf en php ou javascript mais ouvert aux reste :-D

    merci

    ++
    hoshi, 15 Août 2007
    #1
  2. Offline
    eSb` That's Poker!
    Tu peux le faire en css :

    Code:
    <html>
    <head>
    <title></title>
    <style type="text/css">
    <!--
    .menu
    {
               background-image: url(img.jpg);
    	width: 80px;
    	height: 15px;
    }
    .menulien
    {
              color: #000000;
    }
    a.menulien:hover
     {
    	color: #ffffff;
    }
    -->
    </style>
    </head>
    
    <body>
    <div class="menu"><a href="#" class="menulien">dddd</a></div>
    </body>
    </html>
    Ce qui donne un truc du genre.
    http://www.esb-studio.be/Gamerz/css/test.html
    (j'ai supprimé quelques trucs non importants dans le code ci-dessus)

    .menulien
    {
    color: #000000; -> couleur du texte intitiale
    }

    a.menulien:hover
    {
    color: #ffffff; -> couleur du texte en passant dessus
    }

    Je ne vois pas bien ce que tu veux dire avec ton image, mais tu peux la faire apparaître en changeant le background-image dans le hover.
    eSb`, 15 Août 2007
    #2
  3. Offline
    hoshi Hoshi's Love
    C'est pas tout à fait ca enfaite sinon j'aurai simplement mis l'image en dessous et le changement de couleur en 2 clics avec dream :p, nan le truc c'est l'image du fond doit aparaitre en meme temps que quand tu te trouve sur le lien et pas à l'initial ;)
    hoshi, 16 Août 2007
    #3
  4. Offline
    SeigVoland Elite
    Tu veux avoir du texte et quand on passe la souris dessus, une image apparaît?
    SeigVoland, 16 Août 2007
    #4
  5. Offline
    hoshi Hoshi's Love
    Si tu veux mais le texte change de couleur en meme temps :)
    hoshi, 16 Août 2007
    #5
  6. Offline
    NoBrain Touriste
    Place simplement le background dans le status a:hover
    NoBrain, 16 Août 2007
    #6
  7. Offline
    hoshi Hoshi's Love
    Merci :) je vais aller tester tout ca :) juste une question pourquoi y a un a. enfaite?
    hoshi, 16 Août 2007
    #7
  8. Offline
    eSb` That's Poker!
    Vite-fait, ça peut donner ça :
    http://www.esb-studio.be/Gamerz/css/test1.html

    Donc ça change quand tu passes sur la case et pas forcément sur le lien.
    (je vais tenter de le faire changer quand tu passes sur le lien après avoir pris une douche :-D)
    eSb`, 16 Août 2007
    #8
  9. Offline
    hoshi Hoshi's Love

    Pas bsoin c'est juste quand tu passe sur la case que sa doit changer justement :)
    hoshi, 16 Août 2007
    #9
  10. Offline
    eSb` That's Poker!
    http://www.esb-studio.be/Gamerz/css/test2.html

    Voilà alors ; ).

    J'ai changé la structure de mon "code" pour y arriver.
    #menu a : signifie que dans le div ayant pour id "menu" toutes les balises <a> prendront cet attribut. (même idée pour le a. de tout à l'heure)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    <!--
    #menu a
    {
              font-family: Verdana;
    	font-size: 11px;
    	text-align: center;
    	width: 80px;
    	height: 15px;
    	display:block;
    	color: #000000;
    }
    
    #menu a:hover
     {
    	background-image: url(img.jpg);
    	color: #ffffff;
    }
    
    -->
    </style>
    </head>
    
    <body>
      <div id="menu">
    	<a href="#">Premier</a>
    	<a href="#">Deuxième</a>
    	<a href="#">Troisième</a>
      </div>
    </body>
    </html>
    eSb`, 16 Août 2007
    #10
Statut de la discussion:
Fermée.