[REGLER] image qui apparait au survol du lien, puis une autre

image qui apparait au survol du lien, puis une autre [REGLER] - HTML/CSS - Programmation

Marsh Posté le 20-07-2009 à 09:47:24    

Bonjour à tous,
 
 
Ce que je souhaiterai, c'est qu'une image apparait au survol du lien, derrière le lien et que lorsque l'on clique une autre image apparaissent et reste jusqu'a ce qu'un autre lien soit cliqué.
j'ai dessiné les images.
Je voudrai faire çà pour tous les liens.  
 
au debut j'avais ecris çà : (vous pouvez rigoler)
 

Code :
  1. a
  2. {
  3.    text-decoration: none;
  4.    color: black;
  5.    font-size: 12px;
  6. }
  8. a:hover
  9. {
  10.    background-image: url("bouton_off.png" );
  11.    height: 30px;
  12.    width: 60px;
  13.     color: white;
  14. }
  16. a:active
  17. {
  18.    background-image: url("bouton_on.png" );
  19.    height: 30px;
  20.    width: 60px;
  21.     color: white;
  22. }
  25. a:focus
  26. {
  27. background-image: url("bouton_on.png" );
  28.    color: white;
  29.     height: 30px;
  30.    width: 60px;
  31. }


 
mais bon la taille des liens ne sont pas les m^ donc çà n'allait pas. Et le height n'était pas pris en compte. Alors je me suis tourné vers rollover que vous pouvez voir ds le premier lien:
 
<code type="html">

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.    <head>
  4.        <title>Bienvenue sur mon site !</title>
  5.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.      
  7.    <link href="style_ff.css" rel="stylesheet" type="text/css" />
  8. <!--[if IE]>
  9. <link href="style_ie.css" rel="stylesheet" type="text/css" />
  10. <![endif]-->
  12. <script language="JavaScript">
  13. <!-- Begin
  14. bouton = new Image();
  15. bouton.src = "bouton_on.gif";
  16. end -->
  17. </script>
  20.    </head>
  21.  
  23.  
  24.    <body>
  25.      
  26.    <div id="gris">
  27.  
  28.  
  29.  
  32.  <ul class="haut">
  34.   <li class ="haut"><a href="contact.html" onmouseover="bouton.src = 'bouton_on.png';" onmouseout="bouton.src = 'bouton_off.png';"><img src="bouton_off.png" border=0 width="60" height="30" name=bouton>Contact</a></li>
  35. <li class ="haut"><a href="page2.html">Lien</a></li>
  37.        </ul>
  39. <p><img src="image01.png" alt="triptyque" id="triptyque" /></p>
  43.   <ul class="bas">
  44.   <li class ="bas"><a href="galerie.html">Accueil</a></li>
  45.   <li class ="bas"><a href="portrait.html">Portrait</a></li>
  46.   <li class ="bas"><a href="paysage.html">Paysage</a></li>
  47.   <li class ="bas"><a href="page5.html">Noir et Blanc</a></li>
  48.   <li class ="bas"><a href="page6.html">Reportage</a></li>
  49.   <li class ="bas"><a href="page7.html">Architectures</a></li>
  50.   <li class ="bas"><a href="page8.html">Divers</a></li>
  51.   <li class ="bas"><a href="page8.html">Commandez des Tirages</a></li>
  52.   </ul>
  54. <h6>Mough-Lee Création &copy;. Touts droits réservés
  55. Toutes les oeuvres présentes sur ce site appartiennent à l'auteur sauf indications contraires.<br />
  56. Toutes reproductions sont prohibées sauf accord de l'auteur.</h6>
  57. </div>
  58.     
  59.    </body>
  60. </html>


 
mais bon, le mot contact apparait à coté de l'image sous FF et IE7 et sous IE7 il y a des décalage des autres liens et images pas sous FF et sous IE7 le rendu est moche. Donc rien ne va.
 
COmment pourrai-je faire ? Connaissez vous une autre fonction ou dois-je coder différemment le html ?
 
j'ai essayer en enlevant le mot contact et en l'incluant ds l'image. Mais même resultat.
 
voici mon CSS en entier au cas ou cela viendrait de la :
 
 

Code :
  1. body {
  2. background-color: black;
  3. text-align:center;
  4. margin-top:50px;
  5. margin-bottom:50px;
  6. padding:0px;
  8. }
  10. #gris{
  12. background-image: url("gris03.png" );
  13. height: 600px;
  14. width: 800px;
  15. background-repeat: no-repeat;
  16. margin:auto;
  17. text-align:left;
  19. }
  21. #gris02{
  23. background-image: url("gris04.png" );
  24. height: 925px;
  25. width: 800px;
  26. background-repeat: no-repeat;
  27. margin:auto;
  28. text-align:left;
  30. }
  32. li {
  33.           display:inline;
  34.       }
  35.  
  36. li.bas {
  37.    
  38.       margin-right: 30px;
  39.     }
  40. li.haut{
  41.    
  42.       margin-right: 25px;
  43.     }
  45. ul.haut{
  47. float:right;
  48. margin-top:50px;
  49.   }
  50.  
  51. ul.bas{
  53. text-align:left;
  54. margin-top:370px;
  55.   }
  56.  
  57.  
  58. #triptyque {
  60.   position:relative;
  61.   top:290px;
  62.   left: 110px;
  63.   }
  66. a
  67. {
  68.    text-decoration: none;
  69.    color: black;
  70.    font-size: 12px;
  71. }
  73. a:hover
  74. {
  75.  
  76.      color: white;
  77. }
  79. a:active
  80. {
  81.     color: white;
  82. }
  85. a:focus
  86. {
  87.    color: white;
  88.  
  89. }
  92. h6 {
  94. text-align:center;
  95. margin-top:40px;">
  97. }

Message cité 1 fois
Message édité par Positiviste le 21-07-2009 à 07:54:31

---------------
ploum ploum tralala
Reply

Marsh Posté le 20-07-2009 à 09:47:24   

Reply

Marsh Posté le 20-07-2009 à 11:54:40    

Positiviste a écrit :


mais bon la taille des liens ne sont pas les m^ donc çà n'allait pas. Et le height n'était pas pris en compte. Alors je me suis tourné vers rollover que vous pouvez voir ds le premier lien:
 


 
Les éléments inline, comme les liens ou un span doivent être mis en display block pour leur donner une hauteur et une largeur.
Et la pseudo classe :active, c'est uniquement lorsqu'on clique dessus

Reply

Marsh Posté le 21-07-2009 à 07:53:18    

c'est bon réglé. merci
 

Code :
  1. ul {
  2. padding:0;
  3. margin:0;
  4. list-style-type:none;
  5. }
  7. li {
  8. float:left; /*pour IE*/
  9. margin-right:15px;
  10. }
  12. ul li a {
  13. display:block;
  14. float:left;
  15. width:65px;
  16. line-height:21px; /*hauteur de l'image de fond*/
  17. background:none;
  18. color:black;
  19. text-decoration:none;
  20. text-align:center;
  22. }
  24. ul li a:hover {
  25. background:url(../images/bouton_01.png) no-repeat;
  26. color:black;
  27. text-decoration:none;
  29. } 
  31. ul li a:focus {
  32. background:url(../images/bouton_on.png) no-repeat;
  33. color:black;
  34. text-decoration:none;
  36. outline: none;
  37. }
  39. ul li a:active{
  40. background:url(../images/bouton_on.png) no-repeat;
  41. color:black;
  42. text-decoration:none;
  44. outline: none;
  45. }


 
c'était pour les boutons des menus de ce site (accueil, portrait etc..) en cours de construction :
 
http://www.mough-lee.fr/galerie_java/galerie.html


Message édité par Positiviste le 21-07-2009 à 07:53:49

---------------
ploum ploum tralala
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed