Liens "mouse over" en CSS, j'en ai trop..

Bonjour,

Je me suis mis en tête depuis un petit moment de ne plus utiliser le javascript pour la permutation d'images lors d'un survol de lien avec image, mais les CSS.

Seulement, je me rend compte qu'il faut que je crée une style de lien par image différente!
Sur certains site, ça fait beaucoup dans le fichier CSS...
Je ne sais pas si ça risque d'alourdir le CSS inutilement.

Que me conseillez-vous ?

De revoir peut-être l'éventuelle surcharge d'effets graphiques, s'il y a autant que cela d'arrière-plan dynamiques différents

Salut,
bah, ça prendra au pire autant de place que dans le JS, et en fait ça prendra sûrement moins.

a#premier { background: url(image.png) 0 0 }
a#deuxieme { background: url(image2.png) 0 0 }
a#troisieme { background: url(image3.png) 0 0 }

a#premier:hover { background-position: 0 -50px }
a#deuxieme:hover { background-position: 0 -50px }
a#troisieme:hover { background-position: 0 -50px }

Etc
Modifié par Olivier (06 Jul 2005 - 12:41)

ne pas oublier la collection a, a:link, a:visted {} d'un côté et a:hover {} de l'autre, et ce pour éviter cette effet désagréable de fourmillement quand on est à la limite de la zone active.

zzzazzz a écrit :
ne pas oublier la collection a, a:link, a:visted {} d'un côté et a:hover {} de l'autre, et ce pour éviter cette effet désagréable de fourmillement quand on est à la limite de la zone active.

Rien compris tu parles de quoi là ? je vois pas le rapport entre la zone réactive et :visited ...

Euuh bin en fait sur certains navigateurs si les a:link et a :visited ne sont pas renseignés (je veux dire pas renseignés du tout) lorsque la souris passe juste au bord de la zone réactive (un a ou un div d'ailleurs) et bien il y a un effet de fourmillement, ca vibre quoi.

Je ne me souviens plus quel navigateur mais je n'ai plus ce problème là sur Safari IE FF (win et mac).

C'est plus clair ? Je suis pas un pro donc je peux me tromper

zzzazzz a écrit :
Euuh bin en fait sur certains navigateurs si les a:link et a :visited ne sont pas renseignés (je veux dire pas renseignés du tout) lorsque la souris passe juste au bord de la zone réactive (un a ou un div d'ailleurs) et bien il y a un effet de fourmillement, ca vibre quoi.

Je ne me souviens plus quel navigateur mais je n'ai plus ce problème là sur Safari IE FF (win et mac).

C'est plus clair ? Je suis pas un pro donc je peux me tromper

Bah, je jamais rencontré ce problème ni entendu parlé et je vois mal comment ça pourrait agir dessus (surtout que :link et :visited ne s'appliquent pas sur <div>), enfin si tu as des infos ou des exemples je veux bien, mais je vois mal le truc là

Je vais essayer de reproduire la chose…

Hmm il suffit que je cherche à le faire pour que je me contredise… On va dire que j'ai rien dit alors hein ? (Enfin bon si jamais je croise ce comportement, à peine perceptible, certes, je pense à vous)

Bon après midi.

A vrai dire, j'ai tout de même ceci pour chaque image, car j'ai tout d'abord une premiere image OFF puis, l'image ON.

a.bouton-lien {
	display: block;
	width: 19px;
	height: 12px;
	background-image: url(images/BtnFR_on.gif);
}

a.bouton-lien:hover {
	visibility: visible;
}

a.bouton-lien:hover img {
	visibility: hidden;
}

Modifié par Nigel (06 Jul 2005 - 15:34)

Nigel a écrit :
A vrai dire, j'ai tout de même ceci pour chaque image, car j'ai tout d'abord une premiere image OFF puis, l'image ON.

a.bouton-lien {
	display: block;
	width: 19px;
	height: 12px;
	background-image: url(images/BtnFR_on.gif);
}

a.bouton-lien:hover {
	visibility: visible;
}

a.bouton-lien:hover img {
	visibility: hidden;
}

Woulaa, c'est quoi cette bidouille ?
Suis ce tuto et la remarque de mon premier post et tout roulera :
http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique

Ah oui pas mal cette technique !
Par contre, je ne sais pas trop comment l'appliquer car:

<div id="MenuHautG"><a href="#" class="BtnEN"><img src="images/BtnEN_off.gif" border="0" alt="" width="19" height="12" /></a></div>

Voici donc mon code HTML original pour cette image où MenuHauG contient:

#MenuHautG {
	float: left;
	padding-left: 3px;
	position:relative;
	top:8px;
}

Et la class BtnEN qui contenait ce qu'il y a plus haut
Ainsi, maintenant j'applique ceci à la place :

a.BtnEN {
	display:block;
	width: 19px;
	background-image: url(images/BtnEN.gif) no-repeat 0 0;
}
a.BtnEN:hover {
	background: url(images/BtnEN.gif) no-repeat 0 -12px ;
}

Hors, l'image placée dans l'HTML a tendance à poser probleme, car si je la laisse... forcément la chose ne va pas.
Et si je la vire... Je n'ai plus rien

Alors si je pose une lettre pour tester, j'ai effectivement un over correct qui va bien, mais pas de off...

Je comprend rien

Bête question : le chemin vers tes images est ok ?

si la feuille de style n'est pas dans le même dossier que la page, il seront différents...

N'utilises pas d'image dans ton menu, met le texte de ton menu en toute lettre quitte à le masquer (voir FAQ/Tuto) ensuite et ensuite tu utilises les images de fond.

Ok, ce n'est pas une menu, mais un bouton qui pourrait être n'importe où sur le site, répété sur différentes pages... pas forcément toujours au même endroit, d'où mon div

Donc pas de texte, rien dans le <a></a> hormis l'image, mais si l'image est en css, c'est comme si le contenu du lien n'existait plus.
¤_¤
Comprenez ma bidouille précédente? ^^

Pas du tout

Arh...
Ben comment feriez-vous si l'image à survol n'était pas dans un <ul>, mais dans un <div> directement ?


Sinon je veux bien créer un menu pour l'image toute seule et un texte invisible pour la faire apparaitre, mais ça me parait être sacrément plus bidouille que ma propre bidouille avec le display...

aAHaHAaHH...

Gaahh


Wala, ça va mieux ^^

Je vois vraiment pas le rapport entre ton problème et le fait d'utiliser <ul>, <div>, <machin>, <bidul> ou <truc>

Bon, reprenons depuis le début...

Ton image c'est QUOI ? à quoi elle sert ? sa fonction c'est d'être une image, du texte (avec un look plus evolué d'où le besoin de l'image), un élément de décor etc

Là on y comprend rien du tout.

Excusez-moi si je ne suis pas très clair (voire pas du tout )
Il s'agit d'une image comprenant un lien + un survol.

Une image qui fait office de bouton.
Imaginez un drapeau Fr qui vous dirige vers la version française du site, ce même drapeau est par défaut à "off", lorsqu'on pose la souris dessus, il passe à "on"
Il n'y a pas de texte dessus.


Grossièrement, j'ai pour commencer ceci:

<div><a href="#" class="Le_style"><img src="image.gif" border="0" alt="" width="19" height="12" /></a></div>

1 - Un conteneur déplaceable
2 - La balise lien
3 - l'image


Si j'applique le principe du tuto, je me retrouve à devoir supprimer l'image dans l'HTML, ce qui me donne ceci

<div id="MenuHautG"><a href="#" class="Style"></a></div>

Du coup, rien entre les balises, ça disparait...
Modifié par Nigel (06 Jul 2005 - 18:34)

Pour ce type de chose, le mieux est peut être d'utiliser une image en effet.
Donc, tu fais ton roll over avec le JS et on en parle plus.
Eventuellement avec un chti preload histoire que ça soit plus rapide.
Un truc que tu peux faire en guise de preload :
HTML

<div><a id="langfr" href="fr.html"><img onmouseover="this.src='fr_over.png';" onmouseout="this.src='fr.png';" src="fr.png" alt="Site version française" /></a></div>

CSS

a#langfr { background: url(fr_over.png) }

Par exemple.
Modifié par Olivier (06 Jul 2005 - 18:40)