Rollover sur des liens entraînant un changement d'image

[MS-DOS_1991]

Bonjour à tous

Je viens de mettre en place une barre de menu pour mon forum avec un effet de rollover sur les liens: au survol de la souris, l'image placée devant le texte du lien (donc entre les balises <a></a>) change pour donner un effet d'éclaircicement et ainsi mettre mon lien en valeur...

Exemple sur cette page (barre de menu en haut)

Pour l'instant, je n'ai réussi à obtenir cet effet que grâce à du java script: évènements onmouseover et onmouseout utilisés comme ci-dessous:

<li style="position: absolute; right: 200px;">
<a ... onmouseover="document.getElementById('img_faq').src='faq_hover.png';" onmouseout="document.getElementById('img_faq').src='faq.png';">
<img id="img_faq" src="faq.png" ... /> <acronym title="Frequently Asked Questions">FAQ</acronym>
</a>
</li>

J'aimerais pourtant obtenir cet effet en utilisant du CSS uniquement, d'abord pour rendre mes pages valides (attributs on... interdits en XHTML) puis pour que les personnes ayant désactivé le JavaScript pour une raison x ou y puissent également en profiter (il est pas beau cet effet ? ) mais je ne sais pas si c'est possible... peut-être en utilisant la propriété background mais je n'en suis pas sûr du tout

Merci d'avance pour toute future aide

[tankia]

Bonsoir,

Tu as la technique des "portes coulissantes" qui est décrite dans les tutoriels de alsacréations. Tu as les 2 états on et off sur la même image, et tu changes la position de cette image mise en background avec les css à l'aide de a:hover.

Voici l'adresse du site si tu ne connais pas encore : http://www.alsacreations.com => tu vas dans tutoriels et tu cherches le tutoriel "une image réactive en CSS avec une seule image et sans javascript".

Modifié 12 Décembre 2006 par tankia

[karnabal]

Salut,

Tu peux regarder sur mon site (liens en signature), j'utilise à plusieurs reprise une méthode de rollover 100% CSS qui consiste à placer les images souhaitées en background.

Sinon voici un extrait du code de ce type de lien dans une liste :

ul {
 margin-left: 16px;
 padding: 0;
 list-style: none;
 list-style-image: none;
}

li { margin-top:0.5em; 
 }

ul li a, ul li a:visited {
 background: url(images/puce.png) 0px 4px no-repeat;
 padding-left: 15px; font-size:0.9em; font-weight:bold; 
}

ul li a:hover {
 color: #df573d;
 background: url(images/puce-hov.png) 0px 4px no-repeat;
 padding-left: 15px;
}

[MS-DOS_1991]

Merci de vos réponses

J'avais effectivement lu cet article il y a quelques temps mais je ne voyais pas comment utiliser la propriété background pour l'adapter à mes liens (en effet l'image ne doit pas être en fond du lien mais à gauche, et elle n'a une largeur que de 22px )

J'essaie d'adapter le code de karnabal et je vous tiens au courant

[Raphael]

Exemple sur cette page (barre de menu en haut)

Hello,

Je ne vois aucun effet d'image sur FF, et cette page fait planter IE6 chez moi

Ce ne serait pas ce que tu cherches : http://css.alsacreations.com/Tutoriels-et-...sans-javascript ?

[MS-DOS_1991]

Oui, c'est normal : je travaille dessus et je viens de supprimer le javascript

Concernant ton lien, ce n'est pas exactement ce que je recherche car je ne souhaite pas masquer des images mais en changer des existantes

J'essaie en ce moment la méthode des images fondues (exemple avec celle-ci)

[slender]

salut,

tu seras certainement très intéressé par cet excellent article sur pompage. A utiliser pour des menus ou simplement pour du graphisme.

[MS-DOS_1991]

Merci de vos réponses

J'ai finalement fait au plus simple soit utilisation de la propriété background (pas si dur en fait ) avec deux fichiers d'images différents

[captain_torche]

Le seul problème, c'est que tu n'as pas de preload, ce qui risqu d'entraîner un espace blanc au premier rollover sur ton image (surtout pour les petites connexions).

[HoRuSs]

En même temps pour les petites connexions, s'il y a preload et qu'il y a beaucoup d'image à précharger ca fait long aussi, donc le problème est à peser.....

[MS-DOS_1991]

Je pense qu'il est mieux de laisser un espace blanc (au pire 1.5 secondes pour les petites connexions) plutôt que de faire 2 fois plus de hits en préchargeant toutes les images à "rollover".... non ?

Sachant que ces "petites connexions" représentent un très faible pourcentage des visiteurs sur la plupart des sites (a fortiori sur des forums) et que ce pourcentage tend à diminuer chaque année, cela pénaliserait donc plus le serveur qu'autre chose

D'ailleurs, ce blanc de quelques secondes n'apparaîtra qu'une fois par session puisque les images seront ensuite mises en cache par le navigateur

Modifié 16 Décembre 2006 par MS-DOS_1991

[Dudu]

Salut

Je pense qu'il est encore meilleur de ne faire qu'une seule image et d'utiliser la technique des sprites dont slender parle dans le message n°7 de cette discussion.

Pourquoi ? Quelle différence entre une image double et deux images simples ?

Découpe une image de 100 Ko en deux parties égales et tu auras la réponse: les deux images créées feront plus de 50 Ko chacune. Donc au final un poids total supérieur aux 100 Ko de départ.

Pourquoi ça ?

Quasiment tous les logiciels d'imagerie gèrent les données EXIF. À chaque image créée on ajoute ces données EXIF: elles seront donc dupliquées (inutilement) si une image est découpée.

Que plusieurs petites images soient plus rapides à charger qu'une seule grande est donc une fausse information, voire une rumeur de village.

De plus, l'avantage d'utiliser cette technique des sprites est de n'avoir AUCUN "blanc" entre le statut survolé et le statut non-survolé de l'image. En plus, on n'utilise pour ça que la CSS, donc on se fiche de savoir si JS est activé ou non sur le navigateur du client.

Résultat: un chargement optimisé et bien plus rapide, du CSS à 100%, et aucune saute d'image.

La technique idéale

Petit rappel des liens:

Fast rollovers without preload [en/cz]

CSS Sprites: Image Slicing’s Kiss of Death [en] article de Dave Shea, créateur du CSS Zen Garden

Sprites CSS : Meurs, découpe d’images, meurs ! [fr] La traduction française de l'article de Dave Shea par Pompage

Propriété CSS "background-postion" [fr] Propriété méconnue et pourtant si utile

A+

[HoRuSs]

Oui ca fait gagner en place, et en fluidité....

Mais moi par exemple pour ma galerie photo il peut y avoir 100 miniatures sur la même page si j'utilise votre technique ca fait 200 miniature à télécharger ce qui peut être assez long (pour les petites connect, les grosses y'a aucun souccis)...

Quand je dis 200 je parle de la taille bien sur....

J'ai donc préféré choisir les images séparé et le js comme ca si le js est désactivé et bien ca affiche pas l'effet (pas très grave) et sinon ca affiche l'effet que quand l'image est survolé (certe avec un souccis de chargement entre les deux images... en fait ca fait pas de blanc ca met juste un petit décalage pour afficher l'autre miniature... donc pas très grave...).

Voilà

Modifié 17 Décembre 2006 par HoRuSs

[captain_torche]

Juste une question : c'est pour obtenir l'effet visible sur cette page ?

Personnellement, je le trouve inutile; je pense que la plupart des internautes cliqueront tout de suite sur l'image, sans attendre de voir l'effet en rollover.

[HoRuSs]

binh c'est inutile disons que au niveau du contenue ca apporte rien, au niveau du jolie ca apporte une petite touche....

mais oui y'a rien de vraiment indispensable....

De toute facon je pense que je vais refaire le truc et générer mes miniatures en une seul et utiliser la technique du volet.... (une fois que j'aurais limité le nombre d'image à 30 par pages ca ira bien....)

[tankia]

Juste une question : c'est pour obtenir l'effet visible sur cette page ?

Personnellement, je le trouve inutile; je pense que la plupart des internautes cliqueront tout de suite sur l'image, sans attendre de voir l'effet en rollover.

Et bien si on suit ton raisonnement le monde serait bien laid ! Des maisons carrées couleurs parpaing partout.

Sur ce site sur l'égypte, ce rollover est très utile, il permet de mettre l'internaute dans l'ambiance voulue.

[captain_torche]

Ce que je veux dire, c'est que comme il n'y a pas de preload de l'image, l'image en rollover met un peu de temps à s'afficher.

En conditions normales de surf, l'utilisateur lambda cliquera sur le lien bien avant que le rollover ne s'affiche, d'où sa relative inutilité.

[HoRuSs]

Ce que je veux dire, c'est que comme il n'y a pas de preload de l'image, l'image en rollover met un peu de temps à s'afficher.

En conditions normales de surf, l'utilisateur lambda cliquera sur le lien bien avant que le rollover ne s'affiche, d'où sa relative inutilité.

Je suis d'accord avec toi car je fais exactement ca...