Accueil > Forum > > > > curseur assez special
 curseur assez special
lundi 1 août 2005 à 16:12:21 |
curseur assez special
maxlast
|
bonjour J'ai trouver recament un code qui perrmet d'avoir des petites bille qui ce deplacent sous le curseur (elle semblent reliées par un elastique). Je l'ai modifier pour navoir q'une seule image qui ce deplace en dessous.Jusque la tout marche.
Je suis ensuite venu sur ce site et j'ai pris le code qui fait apparaitre une image juste a cote du curseur. Le probleme est que quand je met les deux codes dans la meme page.
L'image qui est sencee pendre sous le curseur est colee a gauche de l'ecran.
Si vous conaissez un code deja fait ce serai genial :-)
je vous quand meme montre mon code qui ne fonctionne pas :
[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>curseurmove</title>
<style type="text/css">
body{width:97%;height:97%;cursor:url(kite.cur);}
#dot0{position: absolute; visibility: hidden; height: 11; width: 11;}
#dot1{position: absolute; height: 30; width: 30;}
</style>
</head>
<div id="dot0">
<img src="surfer.gif">
</div>
<div id="dot1">
<img src="surfer.gif">
</div>
<script language="javascript">
<!-- hide code
var nDots = 2;
var Xpos = 0;
var Ypos = 0;
var DELTAT = .01;
var SEGLEN = 200;
var SPRINGK = 3;
var MASS = 2;
var XGRAVITY = 0;
var YGRAVITY = 50;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 30;
var BOUNCE = 0.2;
var isNetscape = navigator.appName=="Netscape";
var followmouse = true;
var dots = new Array();
init();
function init()
{
var i = 0;
for (i = 0; i < nDots; i++) {
dots[i] = new dot(i);
}
if (!isNetscape) {
}
for (i = 0; i < nDots; i++) {
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;
}
if (isNetscape) { startanimate();
} else { setTimeout("startanimate()", 200);
}
}
function dot(i)
{
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
if (isNetscape) {
this.obj = eval("document.dot" + i);
} else {
this.obj = eval("dot" + i + ".style");
}
}
function startanimate() {
setInterval("animate()", 20);
}
function setInitPositions(dots)
{
var startloc = document.all.tags("LI");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
dots[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZE;
dots[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
}
dots[0].X = dots[1].X;
dots[0].Y = dots[1].Y - SEGLEN;
}
function MoveHandler(e)
{
Xpos = e.pageX;
Ypos = e.pageY;
return true;
}
function MoveHandlerIE() {
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop;
}
if (isNetscape) {
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;
}
function vec(X, Y)
{
this.X = X;
this.Y = Y;
}
function springForce(i, j, spring)
{
var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
}
}
function animate() {
var start = 0;
if (followmouse) {
dots[0].X = Xpos;
dots[0].Y = Ypos;
start = 1;
} for (i = start ; i < nDots; i++ ) { var spring = new vec(0, 0);
if (i > 0) {
springForce(i-1, i, spring);
}
if (i < (nDots - 1)) {
springForce(i+1, i, spring);
}
var resist = new vec(-dots[i].dx * RESISTANCE,
-dots[i].dy * RESISTANCE);
var accel = new vec((spring.X + resist.X)/MASS + XGRAVITY,
(spring.Y + resist.Y)/ MASS + YGRAVITY);
dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);
if (Math.abs(dots[i].dx) < STOPVEL &&
Math.abs(dots[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
dots[i].dx = 0;
dots[i].dy = 0;
}
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;
var height, width;
if (isNetscape) {
height = window.innerHeight + window.pageYOffset;
width = window.innerWidth + window.pageXOffset;
} else {
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;
}
if (dots[i].Y >= height - DOTSIZE - 1) {
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZE - 1;
}
if (dots[i].X >= width - DOTSIZE) {
if (dots[i].dx > 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZE - 1;
}
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = 0;
}
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;
}
} // end code hiding -->
<!--
function move(e)
{
document.getElementById("curseur").style.left = window.event/*on demande si le navigateur est compatible avec l'objet event sous la forme "condition ? instructions si oui : instructions si non" */ ? window.event.clientX :/*on utilise l'argument e de la fonction*/ e.pageX;//la position horizontale du curseur est affecté à la position horizontale du calque
document.getElementById("curseur").style.top = window.event/*idem*/ ? window.event.clientY :/*on utilise l'argument e de la fonction*/ e.pageY; //la position verticale du curseur est affecté à la position verticale du calque
}
/*correction de la fonction change*/
function change()
{
with (document.getElementById("curseur").style)//dans les accolades de l'element with, tous les objets désignés sont automatiquement issus du/des objets parent(s) indiqué(s) entre parenthèses
display = (display == "none")?/*si le calque est caché, on le fait réapparaître*/ "" :/*si le calque est visible, on le cache*/ "none";
}
document.onmousemove = move; //gestionnaire d'évenement surveillant le mouvement de la souris
document.ondblclick = change; //gestionnaire d'évenement surveillant le double click gauche de la souris
//-->
</script>
<body>
<div id="curseur" style="position:absolute;"><!--création du calque contenant l'image-->
<img src="kite.gif"><!--mettez ici le nom de votre image-->
</div>
<script language="javascript">
<!--
function move(e)
{
document.getElementById("curseur").style.left = window.event/*on demande si le navigateur est compatible avec l'objet event sous la forme "condition ? instructions si oui : instructions si non" */ ? window.event.clientX :/*on utilise l'argument e de la fonction*/ e.pageX;//la position horizontale du curseur est affecté à la position horizontale du calque
document.getElementById("curseur").style.top = window.event/*idem*/ ? window.event.clientY :/*on utilise l'argument e de la fonction*/ e.pageY; //la position verticale du curseur est affecté à la position verticale du calque
}
/*correction de la fonction change*/
function change()
{
with (document.getElementById("curseur").style)//dans les accolades de l'element with, tous les objets désignés sont automatiquement issus du/des objets parent(s) indiqué(s) entre parenthèses
display = (display == "none")?/*si le calque est caché, on le fait réapparaître*/ "" :/*si le calque est visible, on le cache*/ "none";
}
document.onmousemove = move; //gestionnaire d'évenement surveillant le mouvement de la souris
document.ondblclick = change; //gestionnaire d'évenement surveillant le double click gauche de la souris
//-->
</script>
</body>
</html>[/CODE] merci d'avance
|
|
lundi 1 août 2005 à 21:26:53 |
Re : curseur assez special
GhislainLavoie
|
Salut! Le problème venait du fait que les deux script utilisaient un window.omousemove. J'ai modifier le deuxième script pour appeler les foncrions du premier script lors du mouvement de la souris. J'ai également fait de modification pour que le script soit compatible avec FireFox. A+, Ghislain <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>curseurmove</title>
<style type="text/css">
body{width:97%;height:97%;cursor:url(kite.cur);}
#dot0{position: absolute; visibility: hidden; height: 11; width: 11;}
#dot1{position: absolute; height: 30; width: 30;}
</style>
</head>
<body>
<div id="dot0">
<img src="surfer.gif">
</div>
<div id="dot1">
<img src="surfer.gif">
</div>
<script language="javascript">
<!-- hide code
var nDots = 2;
var Xpos = 0;
var Ypos = 0;
var DELTAT = .01;
var SEGLEN = 200;
var SPRINGK = 3;
var MASS = 2;
var XGRAVITY = 0;
var YGRAVITY = 50;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 30;
var BOUNCE = 0.2;
var followmouse = true;
var isNetscape = navigator.appName=="Netscape";
var dots = new Array();
init();
function init()
{
var i = 0;
for (i = 0; i < nDots; i++) {
dots[i] = new dot(i);
}
for (i = 0; i < nDots; i++) {
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;
setTimeout("startanimate()", 200);
}
}
function dot(i)
{
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
this.obj = document.getElementById("dot"+i).style;
}
function startanimate() {
setInterval("animate()", 20);
}
function MoveHandler(e)
{
Xpos = e.pageX;
Ypos = e.pageY;
return true;
}
function MoveHandlerIE() {
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop;
}
if (isNetscape) {
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;
}
function vec(X, Y)
{
this.X = X;
this.Y = Y;
}
function springForce(i, j, spring)
{
var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
}
}
function animate() {
var start = 0;
if (followmouse) {
dots[0].X = Xpos;
dots[0].Y = Ypos;
start = 1;
}
for (i = start ; i < nDots; i++ ) {
var spring = new vec(0, 0);
if (i > 0) {
springForce(i-1, i, spring);
}
if (i < (nDots - 1)) {
springForce(i+1, i, spring);
}
var resist = new vec(-dots[i].dx * RESISTANCE,
-dots[i].dy * RESISTANCE);
var accel = new vec((spring.X + resist.X)/MASS + XGRAVITY,
(spring.Y + resist.Y)/ MASS + YGRAVITY);
dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);
if (Math.abs(dots[i].dx) < STOPVEL &&
Math.abs(dots[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
dots[i].dx = 0;
dots[i].dy = 0;
}
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;
var height, width;
if (isNetscape) {
height = window.innerHeight + window.pageYOffset;
width = window.innerWidth + window.pageXOffset;
} else {
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;
}
if (dots[i].Y >= height - DOTSIZE - 1) {
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZE - 1;
}
if (dots[i].X >= width - DOTSIZE) {
if (dots[i].dx > 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZE - 1;
}
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = 0;
}
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;
}
}
// end code hiding -->
<!--
function move(e)
{
document.getElementById("curseur").style.left = window.event/*on demande si le navigateur est compatible avec l'objet event sous la forme "condition ? instructions si oui : instructions si non" */ ? window.event.clientX :/*on utilise l'argument e de la fonction*/ e.pageX;//la position horizontale du curseur est affecté à la position horizontale du calque
document.getElementById("curseur").style.top = window.event/*idem*/ ? window.event.clientY :/*on utilise l'argument e de la fonction*/ e.pageY; //la position verticale du curseur est affecté à la position verticale du calque
}
/*correction de la fonction change*/
function change()
{
with (document.getElementById("curseur").style)//dans les accolades de l'element with, tous les objets désignés sont automatiquement issus du/des objets parent(s) indiqué(s) entre parenthèses
display = (display == "none")?/*si le calque est caché, on le fait réapparaître*/ "" :/*si le calque est visible, on le cache*/ "none";
}
document.onmousemove = move; //gestionnaire d'évenement surveillant le mouvement de la souris
document.ondblclick = change; //gestionnaire d'évenement surveillant le double click gauche de la souris
//-->
</script>
<div id="curseur" style="position:absolute;"><!--création du calque contenant l'image-->
<img src="kite.gif"><!--mettez ici le nom de votre image-->
</div>
<script language="javascript">
<!--
function move(e)
{
if (isNetscape)
MoveHandler(e);
else
MoveHandlerIE();
document.getElementById("curseur").style.left = window.event/*on demande si le navigateur est compatible avec l'objet event sous la forme "condition ? instructions si oui : instructions si non" */ ? window.event.clientX :/*on utilise l'argument e de la fonction*/ e.pageX;//la position horizontale du curseur est affecté à la position horizontale du calque
document.getElementById("curseur").style.top = window.event/*idem*/ ? window.event.clientY :/*on utilise l'argument e de la fonction*/ e.pageY; //la position verticale du curseur est affecté à la position verticale du calque
}
/*correction de la fonction change*/
function change()
{
with (document.getElementById("curseur").style)//dans les accolades de l'element with, tous les objets désignés sont automatiquement issus du/des objets parent(s) indiqué(s) entre parenthèses
display = (display == "none")?/*si le calque est caché, on le fait réapparaître*/ "" :/*si le calque est visible, on le cache*/ "none";
}
document.onmousemove = move; //gestionnaire d'évenement surveillant le mouvement de la souris
document.ondblclick = change; //gestionnaire d'évenement surveillant le double click gauche de la souris
//-->
</script>
</body>
</html>
|
|
mardi 2 août 2005 à 03:49:13 |
Re : curseur assez special
maxlast
|
merci 10000000000000 foix!! Ghislain que la puissance du javascript soit avec toi ! :-)
|
|
Cette discussion est classée dans : var, curseur, document, dx, dots
 Répondre à ce message
 Sujets en rapport avec ce message
Problème de script avec IE - OK ac Firefox - Position relative et absolute [ par bof123 ]
Bonjour, J'ai un problème de compatibilité avec un script (trouvé sur le net) et IE. c'est un script qui permet d'afficher qq images derrière le curs
Cet objet ne gere pas cette methode ou cette propriété [ par timalin ]
Bonjour, le code ci-dessous est tiré d'un code complet mais comporte une erreur quand je le lance sous Ulimate 7 mais marche bizarement sous XP pro.Ca
controle du saisie clavier en javascript [ par vertuee ]
Salut tout le monde, voila j'essai de faire un controle sur le saisie clavier de l'utilisateur, ce code marche tres bien ou le champ n'accepte que d'a
Script qui fonctionne sur Firefox mais pas sur IE ... [ par ocomptoir ]
Bonjour, J'en appelle aux experts ou du moins à ceux qui ont de meilleurs yeux que moi :). Bon, mon script est très moyen, je sais, mais il me suffi
Affichage d'une page selon ce que le visiteur à déjà visité [ par loicseg ]
Bonjour, je cherche une solution à mon problème qui est que : Je souhaite afficher dans une frame une page (vide) si le visiteur n'a pas déjà cliqué s
Aide pour faire une boucle [ par nel_sim ]
Bonjour ! Je débute en Javascript, c'est pour cela que j'ai besoin de vous ! En fait j'aimerai faire une boucle avec for ou while, mais je ne sais pa
recharger les variables suite à un reload [ par goyave ]
bonjour suite à un changement de machine et de prog je me trouve confronté à un probleme enervant j'ai un formulaire avec les champs [code=autre]nom
probleme validation site [ par locs34 ]
bonjour, j'ai récupérer le menu qui suit ici (aucune erreur sur validator), je l'ai ensuite intégrer directement dans ma page index.html cela fonction
remettre des input radio à vide [ par joujma5 ]
bonjour j'ai un bout de code qui me gène je veux bien remettre les input radio vides(!=checked) on rafraîchissant la page web.voici le code: funct
Pb avec IE [ par Thiman ]
j'ai mis ce script d'info-bulle, trouver sur internet. Il fonctionne parfaitement sur Firefox et Opéra mais problème avec IE. Pourriez-vous me venir e
 Livres en rapport
|
Derniers Blogs
 JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc
Forum
 UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|