PDA

View Full Version : ok tracking x position, 300 pixels.. please look its hard to explain..

chris_angell
09-25-2002, 06:10 PM
hello

I have written this code, but I want to change it, and the code you see below has already pushed my javascript skills to thier max.. so I seek help..

At the moment regarding the code below, The more you move your arrow to the left, the faster the animation rotates :) it tracks the x position.. but I am trying to get the animation to flash faster when the mouse it at x position 300, and y 20 pixels, but I am not to sure how to go about this, the code below works. and I hope you can adapt it.

thank you....

<SCRIPT LANGUAGE = "JavaScript">

imgNumber = 0;
totalimgNumber = 2;
anim = new Array();

var IE = document.all?true:false

if (!IE) document.captureEvents(Event.MOUSEMOVE)

document.onmousemove = getMouseXY;

var tempX = 0


function getMouseXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft
} else {
tempX = e.pageX
}
}

for (i = 0; i < totalimgNumber; i++) {
anim[i] = new Image (239, 390);
anim[i].src = 'images/_navigationarrow' + (i + 1) + '.gif';
}

function Switch() {
document.randimg.src = anim[imgNumber].src;
imgNumber++;
if(imgNumber >= totalimgNumber) imgNumber = 0;
}

function animate() {
Switch();
setTimeout("animate()", tempX);
}


</SCRIPT>
</head>

<body onLoad = "animate()"">
<div id="navigationarrowDiv">
<img name="randimg" id="robot" src="images/_navigationarrow1.gif" width="71" height="73"></div>

:) chris
Mr J
09-25-2002, 06:40 PM
Are you saying you only want it to flash fast at these co-ordinates and no-where else?

At what speed?

etc ?
Mr J
09-25-2002, 07:12 PM
Here's a sample:

Where you had the speed increase as the mouse moved left this is now stated in the setTimeout.

Once cursor at 300 x 20 the speed will increase to set rate.
Because you have stated an exact position I have included a script to show the cusor position.

The text in red can be deleted.


Have a play:



<SCRIPT LANGUAGE = "JavaScript">

imgNumber = 0;
totalimgNumber = 6;
anim = new Array();

var IE = document.all?true:false

if (!IE) document.captureEvents(Event.MOUSEMOVE)

document.onmousemove = getMouseXY;

var tempX = 0
var tempY = 0

function getMouseXY(e) {
position()
if (IE) {
tempX = event.clientX

tempY = event.clientY
} else {
tempX = e.pageX
tempY = e.pageY
}
}

for (i = 0; i < totalimgNumber; i++) {
anim[i] = new Image (239, 390);
anim[i].src = 'images/_navigationarrow' + (i + 1) + '.gif';
}

function oSwitch() {
document.randimg.src = anim[imgNumber].src;
imgNumber++;
if(imgNumber >= totalimgNumber) imgNumber = 0;
}

function animate() {

if(tempX==300&&tempY==20){
oSwitch();
setTimeout("animate()",100);
}
else{
oSwitch();
setTimeout("animate()", 1000);


}
}

</SCRIPT>
</head>

<body onLoad = "animate()"">
<div id="navigationarrowDiv">
<img name="randimg" id="robot" src="images/_navigationarrow.gif" width="71" height="73"></div>





<div style="position:absolute;left:300;top:20">X</div>

<SCRIPT language=Javascript>
<!--
var x
var y
if (document.layers){
document.captureEvents(Event.MOUSEMOVE)
}
function position(loc) {
if(document.layers){
x=loc.pageX
}
else{
x=event.clientX}
if(document.layers){
y=loc.pageY}
else{
y=event.clientY}
document.forms[0].elements[0].value = x;
document.forms[0].elements[1].value = y;
}
//document.onmousemove = position;
// -->
</SCRIPT>
<FORM>x <INPUT size=4>y <INPUT size=4></FORM>
chris_angell
09-26-2002, 10:40 AM
yeah sorry, I missed your 2nd thread, I had to make it home.. sorry if I didn't explain fully,

I have tried to implement the code to replace the x, but I kicked into retard mode and got stuck...

ok at the moment it works in the way, if you go to the x position (0 pixels) it flashes fast and the further you are away to the right. it flash's slower. I would like it to do this. but flash faster at x = 300 pixels and y= 20

here is a link to show what I mean :)
http://www.connectonlinepreview.co.uk/gb_new/mainpages/_main_dhtml_flashingarrow.htm

have a look it will make more scene this way :)

thank you...
Mr J
09-26-2002, 03:15 PM
If you are wanting to position the arrow at 300 x 20 include:

style="position:absolute;left:300;top:20"

in the DIV tag


<div id="navigationarrowDiv">

IE


<div id="navigationarrowDiv" style="position:absolute;left:300;top:20">


Note....any smilies should be semicolons


Then substitute your animate function for the following


function animate() {
oSwitch()
if(tempX>=300&&tempY<=20){
setTimeout("animate()",tempX-300)
}
else{
setTimeout("animate()", 1000) // default flash rate
}
}



See if we are getting closer to what you want .
The speeds might need adjusting
chris_angell
09-26-2002, 06:34 PM
is there an easy way to turn the function animate() on and off

say onmouseover etc etc ????? turn off then out on ???

this is all I ask then I am happy...

have tried but failed
Mr J
09-26-2002, 10:12 PM
In my previous post I set the default flash rate to 1000.

In the revised animate function below, when the cursor is not in the active area image zero is shown giving the effect that the animation has stopped.

See if this has the desired effect




function animate() {
oSwitch();
if(tempX>=300&&tempY<=20){
setTimeout("animate()",tempX-300);
}
else{
setTimeout("animate();document.randimg.src = anim[0].src", 1000);// default flash rate
}
}