Espace Atelier
Home
Graphismes
Services
Promotion
Downloads
Conseils
Mail Art
Liens
   
DHTML : Curseur élastique
   

.

Format : DHTML + Javascript
Explorateurs supportés : explorateurs 4.0

Installation : pour intégrer ce script à vos pages,
copiez puis coller la totalité du code après la balise <BODY>.
Veillez bien à modifier le nom de l'image utilisée dans la démonstration
par la vôtre (l'image que nous avons utilisée s'appelle image1.gif.)

Les images :
Nous vous offrons les images de cet exemple.
Vous pouvez créer vos propres images qui suivront le curseur,
dans notre exemple elles sont au nombre de 4.
Pour éviter qu'il y est un cadre autour de ces images,
créez-les en Gif transparent.
Les dimensions des images doivent être réduites (de 5 à 11 pixels).

Le code :

les premières lignes de code installent l'attribut <DIV> servant à déterminer les "couches" d'images qui suivront le curseur :

.

 

   
<div id="dot0" style="position: absolute; height: 11;
width: 11;"><img src="image1.gif" height=11 width=11></div>
   
   

Paramètrer l'effet :
les variables permettent de paramètrer l'effet.
La variable nDots précise le nombre d'images qui
évolueront autour du curseur.
La variable MASS indique la masse de chaque image.
La variable Gravity précise l'indice de gravité
à attribuer au poids des images.
La variable Resistance concerne la solidité
de l'élastique imaginaire.

Vous pouvez bien-sûr modifier ces valeurs afin de trouver
l'effet qui vous convient le mieux.

   
   
var nDots = 7;
var Xpos = 0;
var Ypos = 0;

var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;

   

 

.


Télécharger tout le code et les images

.

 


Curseur "serpent"
Curseur élastique
Curseur suivi
Horloge
Sélection dynamique
Texte en dégradé
Texte enflammé
Légende défilante
News Box
Menu animé

OriginalScript by: Philip Winston (pwinston@yahoo.com) Web Site: http://members.xoom.com/ebullets

Click this banner to discover more

Click here for LinkBuddies