ApparitionImage
Cet objet fait apparaître une image près du curseur de la souris, avec une légende éventuelle et avec ou sans effet de « fading » – apparition et disparition progressives. Des classes CSS peuvent être associées à l’image et sa légende. L’image est insérée via le DOM, il n’y a pas à la définir dans le code HTML. Si la méthode afficher() est appelée sur onmousemove, l’image suivra le déplacement de la souris. Voici le prototype – seul le premier paramètre indiquant le chemin de l’image est obligatoire :
ApparitionImage (urlImage, fading, classeImage, legende,
classeLegende, distanceCurseurX, distanceCurseurY)
Télécharger l’objet avec fichier d’exemple (.zip)
1 – Insérer l’objet ApparitionImage dans l’élément head de la page :
<script src="objet-apparition-image.js"
type="text/javascript"></script>
2 – Créer une instance de l’objet :
var apparition = new ApparitionImage ("image.jpg", 1,
"classe_image", "", "", 20, 20)
Ci-dessus il y aura un effet de fading, une classe CSS sera associée à l’image et la distance par défaut au curseur de la souris sera modifiée.
var apparition = new ApparitionImage ("image.jpg", 0, ""
"texte de la légende", "classe_legende")
Ci-dessus il n’y aura pas de fading ni de classe associée à l’image, il y aura une légende avec classe CSS associée.
3 – Afficher et masquer l’image, par exemple sur un lien :
<a href="xxxxx.html" onmousemove="apparition.afficher(event)"
onmouseout="apparition.masquer()"> … </a>
classeImage peut être associée à l’image pour définir une bordure, un fond ou aussi les 2 ;
classeLegende peut être associée à la légende pour la « styler » et la positionner relativement à l’image. Pour le positionnement, utiliser les propriétés margin-top ou margin-left et non top ou left. La légende apparaîtra en bas de l’image sans positionnement CSS.
Le paramètre urlImage est obligatoire
|
|
urlImage
|
Chaîne URL de l’image à faire apparaître |
|---|---|
fading
|
Booléen avec (1) ou sans (0) effet de fading, à 0 par défaut
|
classeImage
|
Chaîne nom de la classe CSS de l’image |
legende
|
Chaîne texte de la légende |
classeLegende
|
Chaîne nom de la classe CSS de la légende |
distanceCurseurX
|
Entiers distances horizontale et verticale au curseur de la souris (pixels), valent 10 par défaut
|
afficher(event)
|
Affiche l’image (toujours transmettre event, qui est utilisé par les navigateurs compatibles DOM)
|
|---|---|
masquer()
|
Masque l’image |