Dépannage informatique à domicile

Accueil Prestations News Nos Sites Astuces Contact

Exemple d'image réactive: menu graphique. Ici lors d'un survol d'un lien, l'image moins contrastée s'affiche grace la propriété background-position.

• Acceuil
• Société
• Services
• Emploi
• Plan
• Contacts

Codage CSS de l'exemple:

/* Suppression des marges et des puces des éléments "ul" et "li" */
ul, li {
list-style-type: none;
margin:0;
padding:0;
}

ul {
position: absolute;
/* Positionnement pour IE5 et IE5.5 */
left: 30%;
/* Positionnement de l'élément "ul" par rapport à la gauche du conteneur */
top: 50px;
/* Positionnement de l'élément "ul" par rapport au sommet du conteneur */
background: transparent url(image/09.png) top left no-repeat;
/* Arrière plan du menu général */
height: 270px;
width: 300px;
text-align: center;
}

li {
display: inline;
/* Correction pour IE5 et IE5.5 */
}

li a {
display:block;
height:40px;
width: 300px;
line-height: 40px;
color: #e2c6ba;
font-size: 18px;
font-family: georgia, serif;
text-decoration: none;
}

li a:hover {
color: #43271b;
background: transparent url(image/09.png) top left no-repeat;
}

a#lien1:hover {
background-position: 0% -270px;
/* Décalage de l'arrière plan pour chaque bouton */
}

a#lien2:hover {
background-position: 0% -310px;
}

a#lien3:hover {
background-position: 0% -350px;
}

a#lien4:hover {
background-position: 0% -390px;
}

a#lien5:hover {
background-position: 0% -430px;
}

a#lien6:hover {
background-position: 0% -470px;
}