Un rollover sur une image est un comportement permettant de changer d'image lorsque le pointeur de la souris passe dessus, puis l'image revient dans son état initial lorsque le pointeur quitte l'image. Ce système est régulièrement utilisé pour des menus de navigations, boutons de formulaires...
Il existe donc 2 etats :
- un etat initial (lorsque le pointeur de la souris n'est pas sur l'image)
- un etat survolé (lorsque le pointeur de la souris est sur l'image)
Je vais vous montrer 2 méthodes de réalisations d'un rollover sur une image :
- 1ère méthode : rollover via les styles CSS
- 2ème méthode : rollover via JavaScript
Rollover image avec CSS
Dans cette exemple, le comportement du changement d'image est géré par les styles CSS et appliqué au lien hypertexte contenant l'image.
Exemple de rollover avec CSS (passez le pointeur de votre souris dessus) :
Voici le code HTML et CSS :
<html>
<head>
<style>
#aYo{
display:block;
background-image:url('yo-the-mascot-1.gif');
width:241px;
height:241px;
border:1px solid #000000;
}
#aYo:hover, #aYo:focus{
background-image:url('yo-the-mascot-2.gif');
}
#aYo img{
display:none;
}
</style>
</head>
<body>
<a href="http://www.studiovitamine.com/yo-la-mascotte-du-web,264,fr.html" title="Voir la page consacrée à Yo The Mascot" target="_blank" id="aYo">
<img src="yo-the-mascot-1.gif" alt="Yo The Mascot, la petite mascotte du web, rose et toute poilue" />
</a>
</body>
</html>
Explication :
Chaque fois que le pointeur de la souris passe sur le lien (et non l'image), l'image d'arrière plan du lien change. Au début, le lien affiche un arrière plan avec l'image 'yo-the-mascot-1.gif'. La pseudo-classe hover permet d'appliquer des styles CSS au lien hypertexte uniquement lorsque le pointeur de la souris passe dessus. On en profite donc pour changer l'arrière plan du lien avec l'image 'yo-the-mascot-2.gif'.
De même, la pseudo classe focus permet d'appliquer des styles CSS au lien hypertexte lorsque le focus est sur le lien (par exemple en utilisant la touche tabulation de votre clavier), mais cette pseudo classe n'est pas prise en compte par IE (Internet Explorer).
Sémantique :
Vous devez noter que pour fonctionner, il n'est pas obligatoire de mettre la balise <img> dans la balise <a>, puisque j'ai attribué un style CSS
display:none; à la balise <img> qui n'est donc pas affichée (ce que nous voyons à l'écran est l'image d'arrière plan attribuée à la balise <a>).
Alors pourquoi avoir ajouté cette balise <img> ? Pour que cette exemple soit sémantiquement correct. En effet, j'ai souvent rencontré des erreurs de sémantique sur de nombreux tutoriaux qui ne pensent pas aux problèmes d'accessibilité et qui ne mettent rien dans la balise <a>.
Dans mon exemple, une personne aveugle peut savoir que le lien hypertexte est attribué à une image représentant "Yo The Mascot, la petite mascotte du web, rose et toute poilue". Cette exemple est dont sémantiquement correct.
Si vous ne souhaitez pas attribuer de lien hypertexte, vous devez quand même utiliser la balise <a> pour que celà fonctionne sur IE (Internet Explorer). Du coup, ce n'est pas correct d'utiliser une balise <a> pour autre chose qu'un lien hypertexte. Dans ce cas, veuillez indiquer dans l'attribut title="En passant le pointeur de la souris, Yo affiche une bulle indiquant Yo !", de manière à indiquer à une personne aveugle ce qui se passe pour une personne voyante.
Rollover image avec JavaScript
Dans cette exemple, le comportement du changement d'image est géré par JavaScript et est appliqué directement à l'image (ici, pas de balise <a>).
Contrairement à ce que l'on peut penser, cette exemple est egalement sémantiquement correct, mais ne fonctionnera que sur des navigateurs interprétant le langage JavaScript.
Exemple de rollover avec JavaScript (passez le pointeur de votre souris dessus) :
Voici le code HTML et JavaScript :
<html>
<head>
<style>
img{
border:1px solid #000000;
}
</style>
</head>
<body>
<img src="yo-the-mascot-1.gif" alt="Yo The Mascot, la petite mascotte du web, rose et toute poilue" onmouseout="javascript:this.src='yo-the-mascot-1.gif';" onmouseover="javascript:this.src='yo-the-mascot-2.gif';" />
</body>
</html>
Explication :
Chaque fois que le pointeur de la souris passe sur l'image, l'image change, c'est à dire que la valeur de l'attribut src est modifié.
