IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

CSS débutants


précédentsommairesuivant

X. Faire apparaître caractères ou images au survol de la souris (rollover)

A la question : "Comment faites-vous pour faire apparaître des guillemets devant vos liens du menu ?", plusieurs réponses possibles :

X-A. Première méthode

Celle que j'utilisais au début a fait débat. Au vu des différents commentaires, suggestions et critiques, on peut l'abandonner au profit de celles qui suivent.

X-B. Deuxième méthode

Fonctionne avec :

  • FireFox
  • NS 6/7
  • Mozilla 1.x
  • Opéra 7
  • MSIE 5+
  • Safari

Attributs utilisés :

  • background-image
  • background-repeat
  • background-position
  • padding-left

Le guillemet est ici une image qui va être déclarée en image de fond (background-image) associé au a:hover (lien survolé) dans la feuille de style. Afin qu'elle n'apparaisse pas en mozaïque, on indiquera l'option no-repeat à l'attribut background-repeat. Reste à positionner correctement l'image par rapport au texte : à l'attribut background-position on indique les positions relatives à la ligne (horizontale - verticale). Le padding-left indique le retrait que prendra le texte lors du survol de la souris afin qu'il ne recouvre pas l'image.

Source (X)HTML
Sélectionnez
<div id="menu">
  <p>
    <a href="#">menu 1</a><br />
    <a href="#">menu 2</a><br />
    <a href="#">menu 3</a>
  </p>
</div>
Source CSS
Sélectionnez
#menu a:hover 
{
  background-image:url(images/guill_rouge.png);
  background-repeat:no-repeat;
  background-position:1% 50%;
  padding-left:15px;
}

Résultat

X-C. Troisième méthode

Fonctionne avec :

  • FireFox
  • Mozilla 1.3+
  • Opéra 7

Attributs utilisés :

  • content
  • background-image
  • background-repeat

La méthode précédente interdit forcement une autre image de fond... Pour pouvoir combiner image de fond (ici gris_anim.gif) et guillemet, on peut utiliser l'attribut content et la pseudo-classe before.

Attention, MSIE 5.x et 6 n'implémentent pas ces propriétés, mozilla ne comprend la combinaison a:hover:before qu'à partir d'une version supérieure à 1.2.

CSS
Sélectionnez
#menu a:hover 
{ 
  background-image:url(images/gris_anim.gif);
  background-repeat:no-repeat;
}
 
#menu a:hover:before 
{ 
  content:" » ";
}

Résultat théorique en image :

Résultat théorique

Voir le résultat en ligne.


précédentsommairesuivant

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2005 - 2008 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.