Curseur assez special

Signaler
Messages postés
2
Date d'inscription
lundi 1 août 2005
Statut
Membre
Dernière intervention
2 août 2005
-
Messages postés
2
Date d'inscription
lundi 1 août 2005
Statut
Membre
Dernière intervention
2 août 2005
-
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 :





curseurmove

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;}

























merci d'avance

2 réponses

Messages postés
289
Date d'inscription
vendredi 11 mars 2005
Statut
Membre
Dernière intervention
3 avril 2008
4
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>

"dot0">

"dot1">

<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èsesdisplay (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>

"curseur" style=
"position:absolute;"><!--création du calque contenant l'image-->

<!--mettez ici le nom de votre image-->

<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>

</html>
Messages postés
2
Date d'inscription
lundi 1 août 2005
Statut
Membre
Dernière intervention
2 août 2005

merci 10000000000000 foix!! Ghislain


que la puissance du javascript soit avec toi ! :-)