28172 sujets

CSS et mise en forme, CSS3

Hover sur une image

Bonjour

Je souhaiterai afficher une image qui change lorsque l'on passe la souris dessus.

Voici mon css :


a.on
{
	display:block;
	width: 180px;
	height: 164px;
	margin-right: auto;
	margin-left: auto;
	background-image: url('chat_079.jpg');
}

.on:hover
{
	background-image: url('chat-sylvestre-sauvage-20766.jpg');
}


Voici mon html :


 <p>
	<a class="on" href="http://www.google.fr"></a>
</p>


Le problème est que l'image n'est pas chargée lorsque la souris passe dessus et il y a donc un temps de chargement lors du premier passage de la souris.

Vous pouvez essayer sur cet exemple.

Comment faire pour charger l'image au chargement de la page et non au survol de l'image ?

Faut il utiliser du JavaScript? Comment?
Il y a t'il un moyen en CSS ?

Merci!
Modifié par remus69 (01 Jun 2009 - 13:15)
Salut,

pour des images en background css (donc purement décoratives) tu pourrais utiliser la technique des portes coulissantes.

En l'occurrence ton lien est vide (aucun texte) et donc l'image devrait être dans le code HTML (élément IMG avec alt qui va bien) car si les images sont désactivées/indisponibles le lien disparaît. L'effet de rollover devra alors être effectué à l'aide de JavaScript ainsi que le préchargement de l'image de remplacement.
remus69 a écrit :
J'ai trouvé cette astuce également : l'auteur dit que cette astuce provient de Alsacréations.

Allons bon, un contenu obsolète qu'on aurait oublié de mettre hors ligne?

Concrètement, cette astuce est problématique car en cas de désactivation CSS les images à précharger s'affichent en tête du contenu, et ça ne rime pas à grand chose. Ce n'est pas un gros problème, mais ce n'est pas très propre non plus.

Un préchargement «propre» peut se faire de deux manières:
- en JavaScript, avec une fonction qui va bien pour ça;
- pour les background CSS, en utilisant les techniques de type sprites CSS ou portes coulissantes.

Quelques avertissements cependant:
1. Il est déconseillé de faire des navigations cryptiques, où l'utilisateur doit survoler des images de machin avec la souris pour se rendre compte que ah tiens oui c'est cliquable, et donc peut-être que ça mène quelque part.
2. Donc on aura probablement un intitulé textuel pour un lien.
3. Donc cet intitulé textuel doit être présent comme contenu du lien afin d'être accessible. Soit sous la forme <a>intitulé</a>, soit sous la forme <a><img alt="intitulé" /></a> s'il s'agit d'une image-lien.
4. Pour les images-lien (par opposition aux liens texte avec une image de fond décorative), ça se complique un peu car le rollover devra être fait non pas en CSS, mais en JavaScript.

On récapitule:

1. Pour un lien texte avec image de fond décorative, on pourra avoir un effet de rollover en CSS uniquement, et utiliser la technique des portes coulissantes pour l'image de fond afin de n'avoir pas de problème de préchargement à gérer.

2. Pour une image-lien avec effet de rollover, il faut a) précharger l'image de rollover en JavaScript et b) gérer l'effet au survol en JavaScript également.
Merci pour ces précisions. Il y aura t'il une alternative CSS au JavaScript avec l'arrivée de CSS 3 ?
remus69 a écrit :
Merci pour ces précisions. Il y aura t'il une alternative CSS au JavaScript avec l'arrivée de CSS 3 ?

Je ne vais sans doute pas me faire d'amis sur le coup, mais on peut imaginer se passer de JavaScript… en faisant du remplacement d'images accessible avec preload:

[b][#black]HTML[/#][/b]
<a href="#">Mon lien</a>

[b][#black]CSS[/#][/b]
a {overflow:hidden; background:url("item-hover.png") no-repeat 0 50px; height:50px; [#orange]/* Pour une image de 50px de haut */[/#]}
a,a:before {display:block}
a:before {content:url("item.png")}
a:hover:before {content:url("item-hover.png")}
remus69 a écrit :
Il y aura t'il une alternative CSS au JavaScript (...) ?

Non. Les deux langages sont complémentaires et il n'y a pas lieu que l'un s'amuse à fournir une «alternative» à l'autre, même dans sa version 3, 4 ou 5.

Les seules exceptions sont les «points de contact» entre CSS et JavaScript, où l'on utilise JavaScript pour manipuler des styles CSS par exemple. C'est le cas de certains effets d'animation, qui pourraient être remplacés à terme par les transitions CSS (module CSS3 en brouillon depuis peu).
Sujet clos
Aller à