decitic* Reporting, Data et Webmastering pour les PME

CSS: changer d’image au survol de la souris

Comment mettre une image en surbrillance au survol de la souris ? Comment mettre une image à l’envers au survol de la souris ? Comment remplacer une image par une autre au survol de la souris ? Comment décolorer une image au survol de la souris ? Comment machiner une image au survol de la souris ?

C’est une question qu’on peut se poser quand on bidouille du site web parfois, et la réponse est en fait toute bête: on peut faire tout ce qu’on veut avec 3 bouts de code et un éditeur d’images !

How to do that ? (Yes, I speak English very ouaile)

Etape 1: avec ton éditeur d’images favori

On va d’abord créer une image « globale » qui regroupe les deux images qu’on veut voir (l’image d’origine + l’image qu’on voit quand on survole).
Par exemple:

cclogo

Etape 2: avec ton Notepad préféré

Puis on va créer une DIV dont le background va être l’image « doublée » précédente. Seulement, on va s’arranger pour que le background affiche uniquement la partie haute de l’image quand on ne survole pas la DIV, et uniquement la partie basse de l’image quand on survole la DIV.

Ca se passe d’abord au niveau HTML:

<div class="classeimage"></div>

Puis niveau CSS:

.classeimage { background: url('cheminimage/image.jpg') no-repeat 0px -50px; height:50px; width: 50px; display: block; }
.classeimage:hover { background:url('cheminimage/image.jpg') no-repeat 0px 0px; }

Comme vous le voyez, on définit la position du background: -50px dans un cas, et 0px dans l’autre (50px correspondant à la hauteur de l’image).
Très important également, il faut définir la hauteur (« height ») et la longueur (« width ») de la DIV, sinon le background n’aura pas la « place » de s’afficher. Ici: 50px*50px, soit la taille de l’image de background.
Et, chose essentielle: il faut mettre l’attribut « display: block », autrement on aura des problèmes.

Et voilà !

Cette solution permet de n’appeler qu’une seule l’image; parce que oui on pourrait très bien en appeler deux séparées et simplement changer le nom de l’image du background. Mais après on se retrouve avec plein d’images sur son serveur. Dans l’autre sens, il est vrai que n’avoir qu’une seule image ça fait un plus gros poids sur notre page (mais bon, c’est pas énorme non plus)… à voir donc selon ce qu’on préfère (si vous avez une opinion d’ailleurs à ce sujet n’hésitez pas à en parler en commentaire !).

3. D’autres choses encore

Pour que l’image soit un lien, il suffit d’ajouter votre lien entre les deux balises de la DIV. Ensuite niveau CSS, vous devez rajouter le « a » du lien à ce que vous aviez déjà écrit.

Mais zoci, pour ajouter un texte à côté de l’image – ici, à droite – il vous suffit:
– d’écrire votre texte entre les deux balises de la DIV niveau HTML,
– puis de définir un « padding-right: …px;  » côté CSS, ce qui va « élargir » vers la droite la DIV, et éviter que le texte ne se superpose au background.

Dans l’exemple, avec un texte et un lien on aura:

<div class="imgzik"><a href="/site/musique" title="ma musique">blablabla lien</a></div>

et

.imgzik a{ background: url('cheminimage/imgzik.jpg') no-repeat 0px -100px; height:100px; width: 100px; display: block; padding-right: 110px; cursor: pointer;}
.imgzik a:hover { background:url('cheminimage/imgzik.jpg') no-repeat 0px 0px; }

Autre truc bien, si vous voulez changer le curseur, « cursor: pointer; » au niveau CSS et hop vous avez une main qui pointe son doigt au survol de l’image, même si y a pô de lien.

Enfin voilà, n’hésitez pas à demander des choses en commentaire si vous avez des questions !

2 commentaires
  1. LZ dit :

    Non, là non ! passer des démonstrations Excel au code html comme ça sans prévenir, c’est pas possib’ (comme diraient mes zamis brestois). Me faire un coup comme ça en début de semaine, un lundi où le réveil a été avancé en plus, je vais pas m’en remettre ! [et je lirai ça à tête reposée demain matin…]

    • alexis dit :

      LOL 😛
      Je compatis pour la mauvaise réaction chimique qui se produit au passage à l’heure d’été entre le réveil et notre body…
      Hé ba moi ce matin pour me passer ma sale humeur, je me suis détendu dans du codage mignon ! mouahaha

Laisser un commentaire