Dépannage informatique à domicile

Accueil Prestations News Nos Sites Astuces Contact

Exemple d'image réactive: méthode 2. Ici l'image est présentée sous sa 1ere moitié, lors d'un survol, la deuxième moitié s'affiche.

Codage CSS de l'exemple:

/* Cette propriété affiche une image cliquable dans une balise "a" */
a.image {
display: block;
height: 40px;
width: 150px;
background: url(image/button.gif) no-repeat 0 0;
}

/* Cette propriété change l'image au passage de la souris avec la propriété background-position */
a.image:hover, a.image:focus {
background-image: url(image/button.gif);
background-position: 0 -40px
}

/* Cette instruction permet aux navigateurs non graphiques et audio de lire ce qu'est l'image, celle-ci est cachée pour ne pas se superposer à l'image. */
a.image span {
position: absolute;
left:-5000px;
top: -5000px;
text-indent: -5000px;
}