ApparitionElement
Cet objet fait apparaître un élément HTML près du curseur de la souris, une DIV par exemple, avec ou sans effet de « fading ». Il peut servir à apporter des informations contextuelles sur un lien, une image ou un autre élément. Si la méthode afficher() est appelée sur onmousemove, l’élément suivra le déplacement de la souris ; si elle est appelée sur onmouseover, l’élément ne bougera plus une fois apparu. Voici le prototype, seul le premier paramètre est obligatoire :
ApparitionElement (idElement, fading, distanceCurseurX,
distanceCurseurY)
Télécharger l’objet avec fichier d’exemple (.zip)
1 – Insérer l’objet ApparitionElement dans l’élément head de la page :
<script src="objet-apparition-element.js"
type="text/javascript"></script>
2 – Insérer dans le code HTML l’élément à faire apparaître, qui doit être identifié par un attribut id :
<div id="a_apparaitre">
[ … ]
</div>
3 – Créer une instance de l’objet, placée dans le code HTML après celui de l’élément. La variable JavaScript créée doit porter le nom de l’attribut id de l’élément correspondant, comme a_apparaitre dans notre exemple :
var a_apparaitre = new ApparitionElement ("a_apparaitre", 1)
Dans cet exemple il y aura un effet de fading et la distance par défaut au curseur de la souris ne sera pas modifiée.
4 – Afficher et masquer l’élément, par exemple sur un lien :
<a href="xxxxx.html" onmousemove="a_apparaitre.afficher(event)"
onmouseout="a_apparaitre.masquer()"> … </a>
Le paramètre idElement est obligatoire
|
|
idElement
|
Chaîne ID de l’élément à faire apparaître |
|---|---|
fading
|
Booléen avec (1) ou sans (0) effet de fading, à 0 par défaut
|
distanceCurseurX
|
Entiers distances horizontale et verticale au curseur de la souris (pixels), valent 10 par défaut
|
afficher(event)
|
Affiche l’élément (toujours transmettre event, qui est utilisé par les navigateurs compatibles DOM)
|
|---|---|
masquer()
|
Masque l’élément |