Pour faire remarquer qu’un lien existe sur un texte ou une image on rajoute souvent un effet visuel de transition au passage de la souris appelé rollOver.
On utilise pour cela l’effet de style css « : HOVER » qui permet d’assigner des propriétés CSS à un élément HTML durant le moment où il est survolé par le curseur (souris). Il est utilisée entre autre pour les liens (balise <a> … </a>)
7.1 Transformation de l’apparence d’un lien
Par défaut, les liens sont soulignés en bleu et restent tels quels au passage de la souris.
Pour faire en sorte qu’ils perdent ce soulignement et prennent la couleur rouge au survol, il suffit d’indiquer la couleur voulue grâce à l’attribut color et le non soulignement à l’aide de la propriété CSS text-decoration dans a:hover.
Exemple :
Le code CSS :
|
1 2 3 4 |
a:hover { color:red; text-decoration:none; } |
Le code HTML :
|
1 |
<a href="http://mathinfo.alwaysdata.net">Retour à l'acceuil</a> |
Bien sur le choix des couleurs est immense et text-decoration peut prendre des valeurs comme | none | underline | overline | line-through ... , ce qui correspond à | rien | souligné | surligné | barré …
7.2 Effet de rollOver sur une image
HOVER » faire un effet de rollOver sur un bloc sans passer par du javascript.|
1 2 3 4 5 6 7 8 9 10 |
#zone img {display: none;} #zone { display: block; width:75px; height:24px; background-image:url(img/exemple/bouton.gif); } #zone:hover { background-image:url(img/exemple/boutonb.gif); } |
Le code HTML :
|
1 2 3 |
<a href="#" id="zone"> <img src="img/exemple/boutonb.gif" width="75" height="24"> </a> |
Vous remarquerez que l’image du rollOver « boutonb.gif » est dans dans le code HTML pour qu’elle soit préchargée lors de la lecture de la page. Le style appliquée a pour effet de ne pas l’afficher et de la remplacer par « bouton.gif ». Lors du rollOver, cela a pour conséquence de rendre la transition d’images plus fluide.
A faire vous-même 7.2.1 :
Réaliser une page HTML et sa feuille de style CSS présentant une filière d’étude post bac dans laquelle sera mis en avant les matières dominantes de la filière à travers des images et du texte.
Votre image mentionnera la filière choisi et répartira en spirale les images choisies selon les niveaux. Chaque image pointera vers une page illustrant ce qu’elle représente. Vous utiliserez des liens et différents effets de style sur les images vu dans les activités précédentes.
Voici quelques exemples d’images de fond pouvant servir ….
Pour cela une recherche d’information est nécessaire : Eduscol , Onisep ,