Remplacement d'images au survol

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Répondre
guilhem_mdg
Lézard à collerette
Messages : 438
Inscription : 18 juin 2004, 09:13

Remplacement d'images au survol

Message par guilhem_mdg »

Bonjour,

J'ai un menu du style :

Code : Tout sélectionner

<ul>
<li><img src="#" alt="Menu 1" /></li>
<li><img src="#" alt="Menu 2" /></li>
</ul>
Est-il possible, au survol d'un élèment de remplacer l'image actuelle par une autre ? Parce-que j'ai essayé le hover en Css mais l'image se met derrière... :-(

Merci !!!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Cordialement.
Guilhem.
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Tu ne peux pas remplace l'image, puisque ce que tu fais ce n'est pas modifier la valeur src de l'image (ce qu'on ferait en javascript), mais définir une image de fond (je présume).

Code : Tout sélectionner

<ul id="menu">
<li><span>Menu 1</span></li>
<li><span>Menu 2</span></li>
</ul> 
En CSS, tu caches les span :

Code : Tout sélectionner

ul#menu li span {
visibility:hidden; /* évite le display:none pour les lecteurs d'écran si possible */
}
Et maintenant tu peux définir tes fonds sur li !

Code : Tout sélectionner

ul#menu li {
background-image: url(monimage.png);
}
ul#menu li:hover {
background-image: url(monimage_hover.png);
}
Ou quelque chose comme ça :wink:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
guilhem_mdg
Lézard à collerette
Messages : 438
Inscription : 18 juin 2004, 09:13

Message par guilhem_mdg »

Merci Calimo,
ta solution marche effectivement mais j'y avais pensé... ;-)
En fait, le problème c le visibily none pour les moteurs de recherche qui n'apprécient pas... :-(

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Cordialement.
Guilhem.
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

guilhem_mdg a écrit :En fait, le problème c le visibily none pour les moteurs de recherche qui n'apprécient pas... :-(
Parce que maintenant les moteurs de recherche sont capable d'analyser les CSS ? On aura tout vu :lol:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
guilhem_mdg
Lézard à collerette
Messages : 438
Inscription : 18 juin 2004, 09:13

Message par guilhem_mdg »

Bah oui de plus en plus mais c'est pas nouveau ! :D

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Cordialement.
Guilhem.
HP
Tyrannosaurus Rex
Messages : 2196
Inscription : 21 oct. 2004, 10:25

Message par HP »

calimo a écrit :
guilhem_mdg a écrit :En fait, le problème c le visibily none pour les moteurs de recherche qui n'apprécient pas... :-(
Parce que maintenant les moteurs de recherche sont capable d'analyser les CSS ? On aura tout vu :lol:
laisse, c'est le genre de ragots qui traînent sur certains fora de pseudo-webmestres et de pseudo-experts en référancement, comme le fameux webrankinfâme…

le spam-report est (ou devrait l'être) sûrement plus efficace qu'une prétendue vérification automatisée des CSS.

toute ressemblance avec des noms, marques déposées, noms de domaines… ayant réellement existé ne pourrait être que totalement fortuite ; il en va de même pour une certaine "faute d'orthographe"… évidemment :wink:

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X; fr; rv:1.8.1.4pre) Gecko/20070426 Firefox/2.0.0.4pre (Mac Community Build, ElFurbe)
Dernière modification par HP le 14 mai 2007, 13:16, modifié 1 fois.

“La médiocrité obtiendra immanquablement la préséance en se travestissant des oripeaux de la bienséance.”
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

HP a écrit :laisse, c'est le genre de ragots qui traînent sur certains fora de pseudo-webmestres et de pseudo-experts en référancement, comme le fameux webrankifâme…
Ah, ok, je préfère ça alors :lol:

Ce qui *pourrait* gêner, c'est d'avoir un <span> de plus, donc un peu plus de code (et on sait qu'il faut au contraire produire un code simple) :wink:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
guilhem_mdg
Lézard à collerette
Messages : 438
Inscription : 18 juin 2004, 09:13

Message par guilhem_mdg »

Merci de vos réponses très aimables ! :(
Au moins sur le forum de "webrankifâme", ils sont courtois. :lol:

Juste pour rappeler aux autres qui nous lisent que :
* Google n'a jamais donné publiquement son algorythme de recherche. Inutile donc de chercher sur les sites officiels de Google des conseils pertinants en référencement. Par contre, les forums sont là pour vous aider. WebRankInfo et webMaster-Hub en sont des parfaits exemples.
* Google n'a jamais dit qu'il tenait compte des css mais il semble qu'il commence à les crawler de plus en plus afin de lutter contre le spam. Genre des phrases contenant beaucoup de mots clés affichées dans un "display:none;"

Personnellement, j'attache beaucoup d'importance au référencement naturel aussi je préfère ne pas "tricher" pour ne pas être banni par les différents moteurs qui me rapportent quand même la grande majorité de mes visiteurs.
Mais visiblement tout le monde n'attache pas la même importance au référencement...

PS : http://actualites.webrankexpert.com/200 ... et-css.htm

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Cordialement.
Guilhem.
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Guilhem_mdg, je pense sincèrement que tu te fais du souci pour rien :wink:

Savoir si un display:none, un visibility:hidden ou un top:-10000 est appliqué est d'une complexité bien trop importante pour pouvoir le faire systématiquement sur des milliards de pages (regarde le temps que ça prend de charger une page dans Firefox !)

M'enfin, après tout, tu fais ce que tu veux, c'est à toi de choisir si tu veux ton image ou pas :wink:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
guilhem_mdg
Lézard à collerette
Messages : 438
Inscription : 18 juin 2004, 09:13

Message par guilhem_mdg »

M'enfin, après tout, tu fais ce que tu veux, c'est à toi de choisir si tu veux ton image ou pas
Bah oui et non... Comme je disais, la majorité de mes internautes arrivent sur mes sites grâce aux moteurs de recherche. Je ne peux donc pas envisager de me faire bannir par ces derniers.
Maitenant, tu as sans doute raison sur la grande complexité à mettre en oeuvre le contrôle des css, mais Google, il y a quelques années, personne ne pensait qu'il aller pouvoir arriver à faire tout ce qu'il fait aujourd'hui.
Autrement dit : méfiance car je pense personnellement que le processus d'indexation des css est lancé... 8-)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Cordialement.
Guilhem.
martin
Varan
Messages : 1074
Inscription : 21 janv. 2004, 16:23

Message par martin »

je pense aussi que tu t'enquiquines pour rien...

Mais bon si tu y tiens, pars de cet exemple :
http://css.alsacreations.com/Tutoriels- ... age-unique

et pour le sélecteur ul#menu li a :
change text-indent: 40px ; en text-indent: 200px ;
et ajoute :
overflow: hidden;
height: 30px;

Je doute qu'un moteur comprenne aujourd'hui cette manip' (on décale le texte hors de la boite, et on affiche pas ce qui dépasse)
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

guilhem_mdg a écrit :Bah oui et non... Comme je disais, la majorité de mes internautes arrivent sur mes sites grâce aux moteurs de recherche. Je ne peux donc pas envisager de me faire bannir par ces derniers.
Si google banissait les sites qui abusent réellement, ça se saurait.
Alors te faire bannir alors qu'il ne s'agit même pas d'un abus... :roll:

Franchement, ça ne te ferait pas de mal de prendre un minimum de distance par rapport à ce qui se dit sur webrankinfo. Les gens ne vont pas cesser de venir sur ton site si tu ne suis pas toutes leurs recommandations au pied de la lettre (surtout celles qui semblent pour le moins fantaisistes comme celle-ci) :wink:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

PS : dans le doute, à ta place, je retirerais tous les CSS et les javascript de ma page, ainsi que les images, on est jamais trop prudent :P
guilhem_mdg
Lézard à collerette
Messages : 438
Inscription : 18 juin 2004, 09:13

Message par guilhem_mdg »

Bah c justement cette solution que j'ai mis en place (text-indent) mais bon...
Temporairement jusqu'à ce que je trouve une autre solution ! :D

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Cordialement.
Guilhem.
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message par Benoit »

martin a écrit :jourd'hui cette manip' (on décale le texte hors de la boite, et on affiche pas ce qui dépasse)
D'après ce que j'avais lu quelque part, Google exploite au moins en test un robot utilisant précisément le moteur de Gecko.

C'est-à-dire que quelle que soit la méthode CSS que tu utilises, si quelque chose est caché dans Firefox, ce robot s'en rendra compte (je ne sais pas comment il fait exactement, j'imagine une capture d'écran suivie d'une reconnaissance de caractères).

Cela dit, des sites qui font du remplacement d'images sur un menu il y en a des millions, et pas parmi les moindres, donc Google ne se permettrait jamais de les bannir.
♫ Li tens s'en veit, je n'ai riens fais ;
Li tens revient, je ne fais riens. ♪
guilhem_mdg
Lézard à collerette
Messages : 438
Inscription : 18 juin 2004, 09:13

Message par guilhem_mdg »

ok merci benoit de ta réponse :D

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
Cordialement.
Guilhem.
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités