28220 sujets

CSS et mise en forme, CSS3

Image qui affiche une autre à son survol

Bonjour,

je suis en train de faire une page où le survol d'une image en fait apparaîter une autre.
J'ai fait ceci pour l'instant :



<html>
<head> 
   <style type="text/css"> 
      .vignette span 
      { 
         display: none; /* On masque le span par défaut */ 
      } 
      a.vignette:hover 
      { 
         border: 0; /* Pour que ce soit fonctionnel sous IE */ 
      } 
      a.vignette:hover span /* On définit où va s'afficher l'image au passage de la souris */ 
      { 
         display: block; 
         position: relative; 
         left: 100px; 
         top : -90px;
         border: none;
      } 
   </style> 
</head> 
<body> 
   <p> 
   <br>
   <br>

      <a href="#" class="vignette" title="Image 1">
      	<img src="img1.jpg" alt="Image 1" />
      	<span>
      		<img src="img2.jpg" alt="Image 2" />
      	</span>
      </a>
      
      &nbsp; 

   </p> 
</body>



J'ai deux questions :

1) peut on enlever les bordure brun - vert qui sont autour des images et assez moches ?
2) est on obligé de mettre un lien sur la premiere image (je n'en ai pas d'utilité).

Merci !
Smiley cligne
Bonjour.

Pour suprimer les bordures des images en lien, il faut appliquer :
a.vignette img {border:0}

.. du coup 

a.vignette:hover 
{ 
border: 0; /* Pour que ce soit fonctionnel sous IE */ 
}

est inutile.

Le lien href="#" permet sous explorer d'activer le hover. Sous firefox, hover est supporté par la plupart des balises.
Modifié par GeorgesM (02 Sep 2005 - 18:08)
Sujet clos
Aller à