Sujet Précédent Sujet Suivant

Curseur assez special

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

Réponse 1 / 2
GhislainLavoie Messages postés 289 Date d'inscription vendredi 11 mars 2005 Statut Membre Dernière intervention 3 avril 2008 3
1 août 2005 à 21:26
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>
0
Réponse 2 / 2
maxlast Messages postés 2 Date d'inscription lundi 1 août 2005 Statut Membre Dernière intervention 2 août 2005
2 août 2005 à 03:49
merci 10000000000000 foix!! Ghislain


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

Discussions similaires

Problème curseur personalisé
franckypoune35 -
franckypoune35 -

1 réponse
Ecriture caractère spécial
papyvore -
f0xi -

11 réponses
Curseur
cs_MAsterC -
JulioDelphi -

6 réponses
Comment personnalise son curseur
DraaFil -
madicoca -

5 réponses
curseur clignotant
vegetalain -
casy -

1 réponse
Rejoignez-nous