|
|
| Faire du RollOver sans javascript |
- Le RollOver est un effet qui permet de cahnger une image lors du passage du curseur sur celle-ci.
Cet effet est généralement généré par l'intermédiaire d'un script JavaScript.
Nous allons voir dans ce cours comment générer un efeft identique sans le support de JavaScript.
Imaginons un lien classique du type :
- Mon Lien
Maintenant, agrémentons le : (passer la souris sur le bouton ci dessous)
- Mon Lien
/!\ A noter que malheureusement, cet effet ne fonctionne pas sous Netscape.
- L'astuce, va consister à utiliser une "Class" sur lien (comme nous pouvons voir dans le cours : Style sur liens et celui : Style et Class)
Nous allons ici, spécifier plusieurs paramètres :
- - Annuler les effets par deffaut sur lien
- - Spécifier les nouveaux effets
- - Spécifier un fond
- - Spécifier une action à accomplir lors du passage de la souris sur un lien
Dans un premier temps, il faut savoir que tout lien non soumis à une "Class" se retrouve souligné et en bleu.
Que lors du passage de la souris sur ce dernier le lien devient rouge.
Qu'une fois que ce lien a été cliqué, il devient mauve.
Nous allons donc dans un premier temps enlever le style souligné au sein d'une "Class".
| Code : |
|
<HTML>
...
<HEAD>
...
<STYLE type="text/css">
<!--
/* Ici on redéfini la balise <A></A>*/
a {
/* Ici on définie le retrait du style souligné */
text-decoration: none;
/* Ici on défini la couleur par deffaut (en hexadécimal) */
color: #869ABB;
}
-->
</STYLE>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
|
Comme le but de ce cours est d'agrémenter un lien (et pas tous), nous allons donner un "ID" à cette "Class" (ID pour IDentitée).
Nous allons "l'apeller" : "mon_lien".
| Code : |
|
|
<STYLE type="text/css">
<!--
/* Ici on donne un ID pour la Class */
a.mon_lien {
text-decoration: none;
color: #869ABB;
}
-->
</STYLE>
|
Voilà l'effet obtenu :
Mon Lien
|
Maintenant, nous allons modifier le comportement au passage de la souris sur
"Mon_Lien".
| Code : |
|
|
<STYLE type="text/css">
<!--
a.mon_lien {
text-decoration:
none;
color:
#869ABB;
}
/*
Ici on précise le comportement au passage de la souris */
/* On spécifie également un changement
de couleur */
a.mon_lien:hover {
text-decoration:
none;
color:
#5E6E88;
}
-->
</STYLE> |
Voilà
l'effet obtenu :
Mon
Lien |
Maintenant, nous allons également spécifier que "Mon_Lien"
doit toujours avoir le même aspect (souvenez-vous, lors du clic sur
un lien, celui-ci devient mauve).
Il nous faut donc spécifier son apparence permanent.
| Code : |
|
|
<STYLE type="text/css">
<!--
/* Ici on précise le comportement permanent
*/
/*
a.mon_lien:link
= pour l'effet si c'est un lien
a.mon_lien:alink
= pour l'effet sur un lien actif
a.mon_lien:vlink
= pour l'effet sur un lien visité
*/
a.mon_lien:link,
a.mon_lien:alink, a.mon_lien:vlink {
text-decoration:
none;
color:
#869ABB;
}
a.mon_lien:hover {
text-decoration:
none;
color:
#5E6E88;
}
-->
</STYLE> |
Voilà
l'effet obtenu :
Mon
Lien |
Maintenant nous allons spécifier ce qui nous interresse dans ce cours
...
l'affichage d'une image avec un effet de RollOver.
Nous disposons pour cela de deux images au format ".GIF" de même
dimension, à savoir "80 pixels de large" sur "20 pixels
de haut".
A vous par la suite d'adapter vos images en fonction de votre texte.
| Code : |
|
|
<STYLE type="text/css">
<!--
a.mon_lien:link,
a.mon_lien:alink, a.mon_lien:vlink
{
/*
Ici on précise
l'image à afficher
le lien pour cette
image peut être absolu ou relatif.
absolue = "http://mon_site.com/images/mon_image.gif"
relatif
= "images/mon_image.gif"
*/
backgroung:
url(images/mon_image_1.gif);
/*
Ici on précise les dimensions de l'image */
width: 80px;
height: 20px;
/*
Ici on précise que l'on centre le texte dans le fond */
text-align: center;
/*
Ici on précise
que l'on veut mettre le texte à 2 pixels du haut
de l'image
*/
padding: 2px;
text-decoration:
none;
color:
#869ABB;
}
a.mon_lien:hover
{
/*
Ici on précise
l'image à afficher au passage de la souris
*/
backgroung:
url(images/mon_image_2.gif);
width: 80px;
height: 20px;
text-align: center;
/*
Ici on précise
que l'on veut mettre le texte à 3 pixels du haut
de l'image.
Donne un
effet de mouvement au texte.
Augmente
ainsi l'effet du bouton qui s'enfonce.
*/
padding: 3px;
text-decoration:
none;
color:
#5E6E88;
}
-->
</STYLE> |
Voilà
l'effet obtenu :
Mon Lien
|
Pour compléter ce cours, voilà les images utilisées.
Si vous voulez les avoir, il suffit de faire un clic droit sur ces images,
puis dans le menu contextuel, choisir : "Enregistrer l'image sous...".
Effet au repos :
Effet au passage de la souris : 
Dernier point.
- Les navigateus, offre la possibilité de modifier la taille des polices.
Pour éviter le désagréement de voir votre texte plus
grand que votre bouton, il faut donner une taille fixe à ce dernier.
| Code : |
|
|
<STYLE type="text/css">
<!--
/*
Ici on précise que
toute balise se référant à la class "mon_lien"
doit avoir un texte d'une
taille définie.
*/
.mon_lien { font-size:
10px; }
a.mon_lien:link, a.mon_lien:alink, a.mon_lien:vlink
{
backgroung:
url(images/mon_image_1.gif);
width: 80px;
height: 20px;
text-align: center;
padding: 2px;
text-decoration:
none;
color:
#869ABB;
}
a.mon_lien:hover
{
backgroung:
url(images/mon_image_2.gif);
width: 80px;
height: 20px;
text-align: center;
padding: 3px;
text-decoration:
none;
color:
#5E6E88;
}
-->
</STYLE> |
Voilà
l'effet obtenu :
Mon Lien
|
Auteur : ©2002 BLINCKERS© Groups | McPeter
|
