Jump to content

Different follow mouse action


Fire Dragon
 Share

Recommended Posts

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! :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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! :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...