Different follow mouse action

[Fire Dragon]

Hi!I want create image,what follows mouse like this alien worm in Javascript FX site.I downloaded code,and I wanted put ONMOUSEOVER event for it,but then that code won't work.Do anyone know same kind code,what allows ONMOUSEOVER event?Code itself don't need be worm kind,like that,but it must follow mouse same way.And it would be nice,if it can work most of browsers,like Fire Fox.It is hard find these kind mouse followers,because often comes trails,what "touch" cursor,when I want trail what tries "catch" mouse cursor.Thank you for help!

[scott100]

I had a look at the site you posted. When you click on each alien worm it takes you to a new page, there is 4 pages in total all identical appart from the worm.current code

<a href="demo2.html"><img src="images/alien_ant.jpg" width="200" height="150" border="0" alt="Alien Ant Worm"></a>

try this

<img onmouseover="window.location='demo2.html'" src="images/alien_ant.jpg" width="200" height="150" border="0" alt="Alien Ant Worm">

[Fire Dragon]

I had a look at the site you posted.  When you click on each alien worm it takes you to a new page, there is 4 pages in total all identical appart from the worm.current code

<!-- STEP ONE: Paste this code into a new file, save as bomb.js --><!-- Original:  Diana Ugo (ugo76@libero.it) --><!-- Web Site:  [url="http://utenti.tripod.it/falcons"]http://utenti.tripod.it/falcons[/url] --><!-- This script and many more are available free online at --><!-- The JavaScript Source!! [url="http://javascript.internet.com"]http://javascript.internet.com[/url] -->picFollow = new Image();picFollow.src = "bomb.gif";picExplosion = new Image();picExplosion.src = "explode.gif";document.onmousemove = getMousePosition;document.onmouseout = pauseBomb;document.write("<div id=\"diva\" style=\"position:absolute\">");document.write("<img name=\"pic\"src=" + picFollow.src + "></div>");var picX = 20;var picY = 100;var step = 10;var speed = 100;var tolerance = step/2 +1;var mouseX = 0;var mouseY = 0;var mouseOut = true;var followMouse = false;myInterval = setInterval('moveBomb()', speed);function pauseBomb() {mouseOut = true;}function getMousePosition(e) {mouseX = window.event.x + document.body.scrollLeft;mouseY = window.event.y + document.body.scrollTop;mouseOut = false;if (followMouse) {diva.style.left = mouseX - pic.width / 2;diva.style.top = mouseY - pic.height / 2;   }}function calcNewPos() {if (mouseX == picX)return;arg = (mouseY-picY) / (mouseX-picX);mult = 1;if (mouseX - picX < 0)mult = -1;alpha = Math.atan(arg);dx = mult * step * Math.cos(alpha);dy = mult * step * Math.sin(alpha);picX += dx;picY += dy;}function collision() {if ((Math.abs(picX-mouseX) < tolerance) && (Math.abs(picY-mouseY) < tolerance) && (!mouseOut))return true;return false;}function hideAnimation() {diva.style.visibility = "hidden";}function moveBomb() {calcNewPos();window.status = "("+mouseX+","+mouseY+")";diva.style.left = picX - pic.width / 2;diva.style.top = picY - pic.height / 2;if (collision()) {clearInterval(myInterval);pic.src = picExplosion.src;followMouse = true;setTimeout('hideAnimation()', 2000);   }}

I tried find way to this,but image is added by variable,so I don't know,can I use ONMOUSEOVER with it.

[scott100]

This code can be answer to my problems,but I have little problem with it.I don't know how add ONMOUSEOVER event for bomb image.I tried find way to this,but image is added by variable,so I don't know,can I use ONMOUSEOVER with it.

<{POST_SNAPBACK}>

I not quite sure what your asking for here do you want want it so that when you mouseover something the bomb starts to chase you? if so this should do it

<script>var seen=falsefunction startBomb(){  myInterval = setInterval('moveBomb()', speed);}picFollow = new Image();picFollow.src = "http://javascript.internet.com/img/mouse-bomb/bomb.gif";picExplosion = new Image();picExplosion.src = "http://javascript.internet.com/img/mouse-bomb/explode.gif";document.onmousemove = getMousePosition;document.onmouseout = pauseBomb;document.write("<div id=\"diva\" style=\"position:absolute\">");document.write("<img name=\"pic\"src=" + picFollow.src + "></div>");var picX = 20;var picY = 100;var step = 10;var speed = 100;var tolerance = step/2 +1;var mouseX = 0;var mouseY = 0;var mouseOut = true;var followMouse = false;function pauseBomb() {mouseOut = true;}function getMousePosition(e) {mouseX = window.event.x + document.body.scrollLeft;mouseY = window.event.y + document.body.scrollTop;mouseOut = false;if (followMouse) {diva.style.left = mouseX - pic.width / 2;diva.style.top = mouseY - pic.height / 2;   }}function calcNewPos() {if (mouseX == picX)return;arg = (mouseY-picY) / (mouseX-picX);mult = 1;if (mouseX - picX < 0)mult = -1;alpha = Math.atan(arg);dx = mult * step * Math.cos(alpha);dy = mult * step * Math.sin(alpha);picX += dx;picY += dy;}function collision() {if ((Math.abs(picX-mouseX) < tolerance) && (Math.abs(picY-mouseY) < tolerance) && (!mouseOut))return true;return false;}function hideAnimation() {diva.style.visibility = "hidden";}function moveBomb() {calcNewPos();window.status = "("+mouseX+","+mouseY+")";diva.style.left = picX - pic.width / 2;diva.style.top = picY - pic.height / 2;if (collision()) {clearInterval(myInterval);pic.src = picExplosion.src;followMouse = true;setTimeout('hideAnimation()', 2000);   }}</script><body><br /><br /><p>Mouse over the w3c image below to activate the bomb.</p><img id="w3c" style="position:absolute;top:300px;left:400px;" onmouseover="startBomb()" src="http://w3schools.invisionzone.com/style_images/w3sbanner.gif" /></body>

Let me know if you mean something else

[Fire Dragon]

Sorry if my explain was confusing I meaned something like this:Bomb starts chasing mouse when page is loaded,like it now do.Then,if it touches cursor,it starts ONMOUSEOVER event with cursor,and example transfer you to new page.So I want that mouse has onmouseover event with bomb.Now it has samekind effect,but it only changes picture to explosion.I want that it redirectes you (or do something other),but it don't need change image.So I want replace this image changing to window.location,example.However,I can't find how change tjis feature. So:Mouse--><--Bomb =New URLThanks.

[scott100]

Ok, now i understand what you need , here's the code:

<script>picFollow = new Image();picFollow.src = "http://javascript.internet.com/img/mouse-bomb/bomb.gif";document.onmousemove = getMousePosition;document.onmouseout = pauseBomb;document.write("<div id=\"diva\" style=\"position:absolute\">");document.write("<img name=\"pic\"src=" + picFollow.src + "></div>");var picX = 20;var picY = 100;var step = 10;var speed = 100;var tolerance = step/2 +1;var mouseX = 0;var mouseY = 0;var mouseOut = true;var followMouse = false;function pauseBomb() {mouseOut = true;}function getMousePosition(e) {mouseX = window.event.x + document.body.scrollLeft;mouseY = window.event.y + document.body.scrollTop;mouseOut = false;if (followMouse) {diva.style.left = mouseX - pic.width / 2;diva.style.top = mouseY - pic.height / 2;   }}function calcNewPos() {if (mouseX == picX)return;arg = (mouseY-picY) / (mouseX-picX);mult = 1;if (mouseX - picX < 0)mult = -1;alpha = Math.atan(arg);dx = mult * step * Math.cos(alpha);dy = mult * step * Math.sin(alpha);picX += dx;picY += dy;}function collision() {if ((Math.abs(picX-mouseX) < tolerance) && (Math.abs(picY-mouseY) < tolerance) && (!mouseOut))return true;return false;}function hideAnimation() {diva.style.visibility = "hidden";}function moveBomb() {calcNewPos();window.status = "("+mouseX+","+mouseY+")";diva.style.left = picX - pic.width / 2;diva.style.top = picY - pic.height / 2;if (collision()) {clearInterval(myInterval);followMouse = true;setTimeout('hideAnimation()', 2000);window.location="http://www.google.com"  //Go to this page when bomb hits mouse   }}myInterval = setInterval('moveBomb()', speed);</script><body></body>

[Fire Dragon]

Woohoo!This is code what I tried find and create few hours!Thank you very much scott100!My dream has come to true

[Fire Dragon]

I meet new problem with this code.I tried make two mouse trails for same page.One is that bomb trail,and another one is familiar trail what only follows mouse.Well,when I set "normal" mouse trail to my html-document,it disturbs bomb trail.Bomb first moves,but then it stops and only shakes.Another trail works fine.What can cause this,and how I can fix this(if it is even possible)?I really need help,again Finally,here is my full code:

<html><head><body><script>picFollow = new Image();picFollow.src = "bomb.gif";document.onmousemove = getMousePosition;document.onmouseout = pauseBomb;document.write("<div id=\"diva\" style=\"position:absolute\">");document.write("<img name=\"pic\"src=" + picFollow.src + "></div>");var picX = 20;var picY = 100;var step = 10;var speed = 1;var tolerance = step/2 +1;var mouseX = 0;var mouseY = 0;var mouseOut = true;var followMouse = false;function pauseBomb() {mouseOut = true;}function getMousePosition(e) {mouseX = window.event.x + document.body.scrollLeft;mouseY = window.event.y + document.body.scrollTop;mouseOut = false;if (followMouse) {diva.style.left = mouseX - pic.width / 2;diva.style.top = mouseY - pic.height / 2;  }}function calcNewPos() {if (mouseX == picX)return;arg = (mouseY-picY) / (mouseX-picX);mult = 1;if (mouseX - picX < 0)mult = -1;alpha = Math.atan(arg);dx = mult * step * Math.cos(alpha);dy = mult * step * Math.sin(alpha);picX += dx;picY += dy;}function collision() {if ((Math.abs(picX-mouseX) < tolerance) && (Math.abs(picY-mouseY) < tolerance) && (!mouseOut))return true;return false;}function hideAnimation() {diva.style.visibility = "hidden";}function moveBomb() {calcNewPos();window.status = "("+mouseX+","+mouseY+")";diva.style.left = picX - pic.width / 2;diva.style.top = picY - pic.height / 2;if (collision()) {clearInterval(myInterval);followMouse = true;setTimeout('hideAnimation()', 2000);window.location="http://www.google.com"  //Go to this page when bomb hits mouse  }}myInterval = setInterval('moveBomb()', speed);/************************************************************************************************************************/</script></head><body><style>#pic1{position:absolute; }</style><script>//Copyright 2001 Chase Cathcart. Please leave this in here.function trackit(){document.all.pic1.style.left = event.xdocument.all.pic1.style.top = event.yif(event.x < "1"){document.all.pic1.style.left = "1"}}document.onmousemove = trackit</script><img src="character.gif" id="pic1"></body></html>

Thanks!