Image en lien avec un hover valide W3C

Résolu
Kitzume Messages postés 6 Date d'inscription jeudi 18 mars 2010 Statut Membre Dernière intervention 6 juin 2013 - 5 juil. 2010 à 19:12
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 5 juil. 2010 à 20:38
Bonjour,


Objectif : valider le W3C

Le code dessous fonctionne très bien par contre n'est pas valide W3C
Cause : pas de div dans un lien

[diapo.html 

]


.diapo_sites{background-image:url(../images.png)}
.diapo_sites:hover{background-image:url(../images_hover.png)}


Contrainte : garder le hover sur l'image avec validation W3C

J'ai testé plusieurs chose avec le span etc. Sans succès.
La solution est dessous mon nez :s

Merci d'avance
Kit

3 réponses

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
5 juil. 2010 à 19:17
Bonjour,
utilises
a:hover {
  background-image:url(../images_hover.png)
}

universellement reconnu

;O)
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
5 juil. 2010 à 20:38
tu peux également passer par les pseudo class, exemple
<html>
<head>
<style type="text/css">
a:hover {
  color : #f00000;
}
a.BIG:hover {
  font-size : 30px;
}
</style>
</head>


[page.html BIG Lien]

[page.html Lien]

</html>

PS
Je met mon code en espérant que sa aidera d'autre personne
penses donc à mettre en réponses acceptée !
;O)
Kitzume Messages postés 6 Date d'inscription jeudi 18 mars 2010 Statut Membre Dernière intervention 6 juin 2013
5 juil. 2010 à 20:05
Un grand merci pour t'as lumière, comme je le disait c'été dessous mon nez

Je met mon code en espérant que sa aidera d'autre personne

Code valide W3C strict:


[diapo.html ]




Le background et le display est volontairement séparé, cela permet de rajouter d'autre lien images tous en optimisant le code
.diapo_sites a{height:102px; width:188px; display:block;}

.diapo_sites a{background-image:url(../images.png)}
.diapo_sites a:hover{background-image:url(../images_hover.png)}


Cdt
Kit
Rejoignez-nous