Dépannage informatique à domicile

Accueil Prestations News Nos Sites Astuces Contact

Exemple d'image réactive: méthode 1. Ici la premiére image est affichée. Lors du survol ou clic, elle est remplacée par l'autre image.

Codage CSS de l'exemple:

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

/* Cette propriété change l'image au passage de la souris */
a.image:hover, a.image:focus {
background-image: url(image/bouton2.png);
}

/* 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;
}