ApparitionImage

Un objet JavaScript
faisant apparaître une image près du curseur de la souris

Cet objet fait apparaître une image près du curseur de la souris, avec une légende éven­tu­elle 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 onmouse­move, l’image suivra le déplacement de la souris. Voici le prototype – seul le premier para­mè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)

Utilisation

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 dis­tance 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>
	

À savoir

Paramètres
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
distanceCurseurY
Entiers distances horizontale et verticale au curseur de la souris (pixels), valent 10 par défaut
Méthodes
afficher(event) Affiche l’image (toujours transmettre event, qui est utilisé par les navigateurs compatibles DOM)
masquer() Masque l’image

imprimer

télécharger

haut de page

François Delègue