[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. }
  7. a:hover
  8. {
  9.    background-image: url("bouton_off.png" );
  10.    height: 30px;
  11.    width: 60px;
  12.     color: white;
  13. }
  14. a:active
  15. {
  16.    background-image: url("bouton_on.png" );
  17.    height: 30px;
  18.    width: 60px;
  19.     color: white;
  20. }
  21. a:focus
  22. {
  23. background-image: url("bouton_on.png" );
  24.    color: white;
  25.     height: 30px;
  26.    width: 60px;
  27. }


 
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]-->
  11. <script language="JavaScript">
  12. <!-- Begin
  13. bouton = new Image();
  14. bouton.src = "bouton_on.gif";
  15. end -->
  16. </script>
  17.    </head>
  18.  
  19.  
  20.    <body>
  21.      
  22.    <div id="gris">
  23.  
  24.  
  25.  
  26.  <ul class="haut">
  27.   <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>
  28. <li class ="haut"><a href="page2.html">Lien</a></li>
  29.        </ul>
  30. <p><img src="image01.png" alt="triptyque" id="triptyque" /></p>
  31.   <ul class="bas">
  32.   <li class ="bas"><a href="galerie.html">Accueil</a></li>
  33.   <li class ="bas"><a href="portrait.html">Portrait</a></li>
  34.   <li class ="bas"><a href="paysage.html">Paysage</a></li>
  35.   <li class ="bas"><a href="page5.html">Noir et Blanc</a></li>
  36.   <li class ="bas"><a href="page6.html">Reportage</a></li>
  37.   <li class ="bas"><a href="page7.html">Architectures</a></li>
  38.   <li class ="bas"><a href="page8.html">Divers</a></li>
  39.   <li class ="bas"><a href="page8.html">Commandez des Tirages</a></li>
  40.   </ul>
  41. <h6>Mough-Lee Création &copy;. Touts droits réservés
  42. Toutes les oeuvres présentes sur ce site appartiennent à l'auteur sauf indications contraires.<br />
  43. Toutes reproductions sont prohibées sauf accord de l'auteur.</h6>
  44. </div>
  45.     
  46.    </body>
  47. </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;
  7. }
  8. #gris{
  9. background-image: url("gris03.png" );
  10. height: 600px;
  11. width: 800px;
  12. background-repeat: no-repeat;
  13. margin:auto;
  14. text-align:left;
  15. }
  16. #gris02{
  17. background-image: url("gris04.png" );
  18. height: 925px;
  19. width: 800px;
  20. background-repeat: no-repeat;
  21. margin:auto;
  22. text-align:left;
  23. }
  24. li {
  25.           display:inline;
  26.       }
  27.  
  28. li.bas {
  29.    
  30.       margin-right: 30px;
  31.     }
  32. li.haut{
  33.    
  34.       margin-right: 25px;
  35.     }
  36. ul.haut{
  37. float:right;
  38. margin-top:50px;
  39.   }
  40.  
  41. ul.bas{
  42. text-align:left;
  43. margin-top:370px;
  44.   }
  45.  
  46.  
  47. #triptyque {
  48.   position:relative;
  49.   top:290px;
  50.   left: 110px;
  51.   }
  52. a
  53. {
  54.    text-decoration: none;
  55.    color: black;
  56.    font-size: 12px;
  57. }
  58. a:hover
  59. {
  60.  
  61.      color: white;
  62. }
  63. a:active
  64. {
  65.     color: white;
  66. }
  67. a:focus
  68. {
  69.    color: white;
  70.  
  71. }
  72. h6 {
  73. text-align:center;
  74. margin-top:40px;">
  75. }

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. }
  6. li {
  7. float:left; /*pour IE*/
  8. margin-right:15px;
  9. }
  10. ul li a {
  11. display:block;
  12. float:left;
  13. width:65px;
  14. line-height:21px; /*hauteur de l'image de fond*/
  15. background:none;
  16. color:black;
  17. text-decoration:none;
  18. text-align:center;
  19. }
  20. ul li a:hover {
  21. background:url(../images/bouton_01.png) no-repeat;
  22. color:black;
  23. text-decoration:none;
  24. ul li a:focus {
  25. background:url(../images/bouton_on.png) no-repeat;
  26. color:black;
  27. text-decoration:none;
  28. outline: none;
  29. }
  30. ul li a:active{
  31. background:url(../images/bouton_on.png) no-repeat;
  32. color:black;
  33. text-decoration:none;
  34. outline: none;
  35. }


 
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