bouton onmouseover

[php_addict]

bonjour

j'ai pour habitude de faire ceci pour mes boutons onmouseover:

a.bouton{background:url(images/template/image1.gif) no-repeat;  }



a.bouton:hover { background:url(images/template/image2.gif) no-repeat; }

ma question est assez simple:

est ce la meilleur solution? et je me demande si il n'y a pas moyen de coupler ceci avec jquery pour avoir un truc plus sympa...

bon dimanche !

[Sephi-Chan]

Non, ce n'est pas bien du tout. Il vaut mieux utiliser les sprites CSS qui, en utilisant une seule image qui contient toutes les images de fond, diminuent le nombre d'images téléchargées et le poids total des images : donc le site s'affiche plus vite.


Sephi-Chan

[php_addict]

ah oui ok merci ! je ne connaissais pas cette façon de faire en css ...

merci !

---

par contre ce que je ne comprends pas c'est:

Code :

background-position:0px -26px

pourquoi pas plutôt :

Code :

background-position:0px 26px

car:

The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions

[Anthor]

Car il faut remonter de 26px vers le haut pour atteindre le milieu de l'image. D'où une position négative.

[gameprog2]

Non, ce n'est pas bien du tout. Il vaut mieux utiliser les sprites CSS qui, en utilisant une seule image qui contient toutes les images de fond, diminuent le nombre d'images téléchargées et le poids total des images : donc le site s'affiche plus vite.

ça c'est top comme solution, je ne connaissais pas !
Merci de l'info !

J'ai traduis (avec voilà.fr) la page de ton lien sur les sprites CSS et le titre donne ça :

Lutins de CSS : Quels Ils Sont, Pourquoi Ils sont Frais et Comment Les utiliser

:hahahaha:

[php_addict]

je me permet de revenir sur ce sujet:

j'ai une bonne 100 de mini icones dont plus de 60 icones de meme taille

je pensais les regrouper dans un seul sprite (un seul fichier) mais du coup je ne peut pas mettre d'attribut alt="" et title=""

y a t il une autre solution que de faire ceci:

<a href="#" alt="" title=""><div id="MaDiv"></div></a>



MaDiv{background-image: url(images.gif);background-position:-146px 0px;}

c'est pas très propre si? et en plus cela me fait un lien que je ne souhaite pas vraiement...

ou alors je fais (au detriment de l'accessibilité et de l'info alt ou survol de la souris) ceci:

<div id="MaDiv"></div>



MaDiv{background-image: url(images.gif);background-position:-146px 0px;}

qu'en pensez vous ? je gagnerais a regrouper mes icones dans un seul fichier (sprite) en terme de requetes html mais je perdrais mes alt="" et title="" ???

[Sephi-Chan]

Je ne vois pas vraiment le problème. Il faut mettre un attribut alt vide uniquement pour les images décoratives. Ici, elles ont un rôle.
Et il ne faut pas utiliser href="#", sois tu le renseignes, sois tu utilises une autre balise. L'attribut alt n'est pas réservé aux liens. Cf. W3Schools — HTML title Attribute.

<span class="ability ability-aaa" title="Ability description…">Ability name</span>

Et tu mets un text-indent de -10000px sur la classe .ability.


Sephi-Chan

[php_addict]

Et tu mets un text-indent de -10000px sur la classe .ability.

le text-indent serait pour simuler le atl="" ? je suis pas certain de vouloir mettre un text-indent de -10000px sur tout mes icones...

[Ter Rowan]

ce qui n'est pas bien du tout, a mon sens, pour l'accessibilité (donc quand on cherche à mettre des alt) c'est d'utiliser des images de fond (background-image) qui porterait la moindre information

l'image de fond, c'est pour l'esthetique, ça ne doit porter aucune information qui ne serait pas exploitable en mode texte (sinon on aurait mis des alt sur les images de fond)

du coup, soit tu fais le truc de Sephi (mais est ce que ça génère un ascenseur ou un truc comme ça de déplacer aussi loin ?)
soit tu n'utilises pas background-image mais tu mets des images ( <img src=....) et au lieu d'utiliser css/hover, tu utilises javascript (avec de jolis effets éventuellement)

peut être j'y pense une méthode que je n'ai jamais testée, si tu écris le texte en tout petit et invisible (d'ailleurs est ce qu'on peut mettre un texte en invisible ce serait bien ça)
comme ca le texte est au bon endroit, mais il n'est pas vu par l'oeil, uniquement lu par jaw et compagnie


Edit oula la faute sur le nom ^^

[Sephi-Chan]

L'information est portée dans la balise. Non il sert à virer le nom de la capacité de l'écran tout en la laissant dans la source. Mais si le nom fait partie de la description. Mais pourquoi est-ce que ça t'inquiète ?

Et rendre le texte transparent est possible mais il deviendra sélectionnable, donc ce n'est pas bien, d'où l'astuce du text-indent. Par contre, il faut utiliser un bloc, pas une balise en ligne.


Sephi-Chan