Gandi.net Groups

Blog Généralités: Re: Changer l'image en survol ?

Dans le sujet : Changer l'image en survol ?

Vous devez être connecté pour poster de nouveaux messages. Créer un compte.

Le 15 mar 2008 à 13:02 CET, Frédéric SCHWEBEL a écrit :
Il y a probablement une possibilité en CSS avec la propriété
"hover"
qui s'applique aux liens mais peut-être aux images aussi.
Pour cela, il faudra obligatoirement utiliser le thème "Custom theme",
pour avoir accès en modification au fichier de styles CSS du thème.

Dans le code du billet (ça devra être fait en XHTML) :
<div class="pub" id="pub1">&nbsp;</div>
<div class="pub" id="pub2">&nbsp;</div>
<div class="pub" id="pub3">&nbsp;</div>
Dans la feuille de styles :
.pub {width: 400px; height: 300px;}

#pub1 {background-image: url('http://www.monsite.com/public/pub1.png')
no-repeat top left;}
    #pub1:hover {background-image:
    url('http://www.monsite.com/public/pub1-survol....) no-repeat top
    left;}

#pub2 {background-image: url('http://www.monsite.com/public/pub2.png')
no-repeat top left;}
    #pub2:hover {background-image:
    url('http://www.monsite.com/public/pub2-survol....) no-repeat top
    left;}

#pub3 {background-image: url('http://www.monsite.com/public/pub3.png')
no-repeat top left;}
    #pub3:hover {background-image:
    url('http://www.monsite.com/public/pub3-survol....) no-repeat top
    left;}
Ça ne pourra pas rendre un effet de transition : ça passera net de
l'image 1 à l'image 2.
Alexandre - http://www.livresanspage.net