Question sur les images survolées en CSS

Bonjour,

J'ai un menu avec 12 boutons. Ce sont des images différentes mais de taille identique. J'aimerais appliquer un effet de survol à chacune de ces images.

Je sais réaliser cet effet, voici comment je procède :

#icone a.bouton {
display: block;
border:0;
height: 65px; width: 46px;
vertical-align: middle;
background: url("icone.jpg") 0 0 no-repeat
}
#icone a:hover.bouton {
background-position: -46px 0
}

<span id="icone"><a class="bouton" href="#"></a></span>

Le problème est qu'il me faut créer autant d'ID qu'il y a de boutons différents soit, dans mon cas, 12 fois ! Le fichier CSS est au final assez lourd et je suis sûr qu'il y a moyen de faire plus intelligemment.

Serait-il possible de créer une seule classe qui ne mentionnerait pas le fichier JPG et ainsi pourrait être attribuée à tous les boutons ?

Comment faire svp ?
Merci !

Bonjour, si ton span ne contient que ton lien, il me semble inutile...

<a href="#" class="bouton" id="icone1">Texte</a>
<a href="#" class="bouton" id="icone2">Texte</a>

a.bouton {
    display: block;
    border:0;
    height: 65px; width: 46px;
    vertical-align: middle;
    background: 0 0 no-repeat;
}
a:hover.bouton {
    background-position: -46px 0
}
#icone1 {
    background-image : url('icone1.jpg');
}
#icone2 {
    background-image : url('icone2.jpg');
}

Modifié par Gothor (14 Feb 2012 - 14:57)

si je comprend bien tu veux appliquer un background-position: -46px a tout tes boutons au hover

Il suffit de n'appeler que ta classe .boutton :

a.bouton{

} <- ici tu mettra toutes tes propriétés commune a tes boutons.


a.bouton:hover {

background-position: -46px 0

}
mais a partir du moment ou tu auras des background différent, tu vas devoir passer par un id !

span#icone{

}

Bonjour,

Les images semblant être porteuses de contenu (puisque les liens sont vide), elles doivent se trouver dans le code HTML. L'effet de survol sera gérer en JavaScript.

Hello,

Tout comme Laurie-Anne. Si l'image porte l'information il faut la déclarer avec <img alt="..."> si on veut que l'information soit lisible dans tous les cas de figure (pour la simple et bonne raison que c'est le seul mécanisme défini en HTML pour associer une image à un libellé textuel, et que toute autre astuce casse ce lien sémantique et donc ne permet pas aux navigateurs de restituer soit l'image soit le texte suivant le cas de figure).

On peut voir le site http://www.arespritesaccessible.net/ pour plus d'explications sur le sujet.

Je rajouterai que pour faire un bouton il y a un élément dédié en HTML: BUTTON. L'élément A est destiné à créer des liens hypertexte ou des ancres, ce qui n'a rien à voir. Et si on a un peu de mal à styler les boutons, on peut à la rigueur utiliser un SPAN:

<span tabindex="0" role="button">Fonction</span>

Bonjour et merci beaucoup pour vos réponses !

En fait, les images sont des pictogrammes qui décrivent le produit. Leur unique rôle est d'agrémenter la page esthétiquement.

S'ils ne sont pas visibles, ce n'est pas extrêmement grave.