DeplacementElement

Un objet JavaScript
déplaçant un élément verticalement, horizontalement ou en diagonale

Cet objet permet de déplacer un élément dans toutes les directions, d’un point d’origine à un point de destination et inversement. Ces points peuvent se situer à l’intérieur comme à l’extérieur de la zone d’affichage. Deux méthodes permettent de masquer et afficher l’élément. Voici le prototype, seul le dernier paramètre intervalle est optionnel :

DeplacementElement (idElement, origineX, destinationX, decalageX,
          origineY, destinationY, decalageY, intervalle)
	

Télécharger l’objet avec fichier d’exemple (.zip)

Utilisation

1 – Insérer l’objet DeplacementElement dans l’élément head de la page :

<script src="objet-deplacement-element.js"
          type="text/javascript"></script>
		

2 – Définir l’élément à déplacer dans le code HTML, ici une image placée dans une <div> ; l’élément doit être identifié par un attribut id :

<div id="a_deplacer">
     <img src="image.jpg" width="30" height="30" alt="">
</div>
	

3 – Créer une instance de l’objet, placée dans le code HTML après la définition de l’élé­ment à déplacer. La variable JavaScript doit porter le nom de l’attribut id de l’élément cor­res­pondant, comme a_deplacer dans notre exemple :

var a_deplacer = new DeplacementElement ("a_deplacer", -200, 300,
          10, 0, 750, 15, 10)
	

4 – Lancer les déplacements aller et retour, ici depuis 2 liens :

<a href="#" onclick="if (!a_deplacer.enMvt)a_deplacer.aller()"> … </a>
<a href="#" onclick="if (!a_deplacer.enMvt)a_deplacer.revenir()"> … </a>
	

… ou depuis un seul lien :

<a href="#" onclick="if (!a_deplacer.on && !a_deplacer.enMvt)
     a_deplacer.aller() else if (a_deplacer.on && !a_deplacer.enMvt)
     a_deplacer.revenir()"> … </a>

À savoir

Paramètres
Les paramètres soulignés sont obligatoires
idElement Chaîne ID de l’élément à déplacer
origineX
destinationX
Entiers coordonnées horizontales d'origine et destination
origineY
destinationY
Entiers coordonnées verticales d'origine et destination
decalageX
decalageY
Entiers pas horizontal et vertical du déplacement en pixels
intervalle Entier millisecondes entre chaque mouvement, vaut 10 par défaut
Propriétés
nomObjet.on Booléen vaut true si le déplacement aller a eu lieu, false sinon ou si le déplacement retour a eu lieu
nomObjet.enMvt Booléen vaut true pendant la durée des déplacements, false en-dehors
Méthodes
aller() Déplacement aller (origine vers destination)
revenir() Déplacement retour (destination vers origine)
cacher() Masquage de l’élément
afficher() Affichage de l’élément

imprimer

télécharger

haut de page

François Delègue