Qu'est-ce que l'Encyclopédie du Webmaster ?

L'encyclopédie de l'Internet fournit aux Webmasters la connaissance de base sur les mots utilisés en Informatique et Internet. Elle inclus donc les anglicismes qu'utilisent les développeurs de logiciels, les hackers et le monde "interne" de la programmation. L'encyclopédie de l'Internet est une source gratuite de mariposa.eu.com destinée aux débutants et aux professionnels.

Qu'est-ce que le rollover ?


L'effet rollover (survol en français) s'applique aux textes, boutons et images. Le plus connus sont les rollovers de boutons de navigation. Dès que la souris survole un de ces boutons, la couleur, le texte ou l'image change pour reprendre l'aspect d'avant dès que la souris l'a quitté.
 
On parle ici d'une action interactive entre l'utilisateur et la page. Le mot elle-même vient de l'expression "rolling the mouse cursor over the button" (survoler un bouton avec le curseur de la souris). L'effet n'est donc rien d'autre qu'une image ne soit remplacée par une autre par l'action de la souris. Il est possible d'activer un lien et de changer la page par la même action.
 
Pour créer un effet de rollover on a donc besoin de deux images de la même taille, dont l'image de base sera remplace par la deuxième dès que la souris entre dans le champs du bouton et disparaît dès que la sourit sort de ce champs.
 
On peut créer des rollovers de plusieurs manières. La méthode sûr se base sur les feuilles de style (CSS), la méthode "classique" sur JavaScript et la méthode en vogue, sur flash.
 
On dinstingue en règle général quatre types de rollover :
 
- L'image de base est remplacé par une deuxième image par l'action de la souris
- La taille de l'image de base augmente par une action de la souris (zooming rollover)
- L'image de base apparaît ou disparaît progressivement par l'action de la souris (fading rollover)
- Une autre partie sur l'écran change dès que la souris survole l'image (disjointed rollover)
 
Le rollover sûr, donc indépendant de la configuration du navigateur et du système d'exploitation se base sur les feuilles de style (CSS) et peut se présenter de la manière suivante :
 
/* Feuille de style */
a {
  display: block;
  width: 120px;
  height: 24px;
  background-image: url(image_base.jpg);
}
a:hover {
  background-image: url(image_rollover.jpg);
}
a span {
  display: none;
}

 
Les rollovers en JavaScript se basent sur les événements intrinsèques comme onMouseOver, onMouseMove, onMouseOut etc. et l'objet Image(). Le fonctionnement du rollover exige toutefois que JavaScript soi activé dans les navigateurs des internautes. L'exemple suivant peut également être appliqués aux albums photos.
 
<!-- effet rollover en JavaScript -->
<script type="text/javascript">
<!--
/* pré-charger les image */
img1=new Image(120,24)      /* déclaration des images */
img2=new Image(120,24);
img1.src="image_base.jpg";  /* pré-chargement des images*/
                            /* (.jpg, .gif ou .png */
img2.src="image_rollover.jpg";
/* déclaration des variables (détectent l'action de la souris) */
Off=1;
On=2;
/* déclaration de la fonction pour les rollovers */
function Rollover(nom_image,action_souris)
{
    document[nom_image].src=eval("img"+action_souris+".src");
}
//-->
</SCRIPT>

 
Ensuite, on appelle la fonction simplement par un lien du body (corps) :
 
<a href="page_cible.html" onMouseOver="Rollover('bouton',On)"
onMouseOut="Rollover('bouton',Off)">
<img src="image_base.jpg" border="0" width="120" heigth="24"
name="bouton" title="indication title" alt="indication alt">
</a>

 
Le rollover en flash se base sur ActionScript et fonctionne exclusivement dans les navigateurs qui disposent du plug-in flash player.
 
mot prochain : backdoor
 
Copyright 2007, mariposa.eu.com
 
* Les mots en gras font partie de notre Lexique d'Informatique


Mots de la semaine


Mots prochains

  • backdoor
  • crack
  • crimeware
  • podcasting