Images following/revolving around cursor with Javascript

G

guest2013-1

guest
Joined
Aug 22, 2003
Messages
19,800
Reaction score
13
I'm in need of images (hearts) to follow/and/or revolve around the cursor

I haven't found any decent code capable of this (or have cross-browser functionality)

Can anyone point me in the right direction or know of a site that doesn't have old depreciated code still checking if people are running Netscape Navigator?

ta
 
why on earth would you want todo that cheesy effect:P
 
Well... see... here it is

Client wants cheesy affect
Client has money
I like taking client's money
I do work
Client gives money
I buy beer

I happy

the end

*slaps you guys upside the head*

Why ELSE would I want this stupid effect! lol
 
Well, you can try an absolutely positioned <img>. Add an onmousemove event to the <body> of the page, which changes the style.top and style.left attributes of the image to correspond to the event.clientX and event.clientY coordinates of the mouse cursor? Would that do the trick?

Try something like this:

Code: 
    <script language="javascript" type="text/javascript">
    
        function moveimage()
        {
            var x = event.clientX;
            var y = event.clientY;
            
            document.getElementById("mover_image").style.left = x + 20;
            document.getElementById("mover_image").style.top = y + 20;
        }
    
    </script>

...then for the <body> tag, add the following:

Code: 
<body onmousemove="moveimage();">

Declare a CSS class as follows:

Code: 
#mover_image
{
  position:absolute;
}

...then declare the image as follows:

Code: 
<img id="mover_image" src="IMAGE SOURCE" />
 
Last edited:
FarligOpptreden said:
Well, you can try an absolutely positioned <img>. Add an onmousemove event to the <body> of the page, which changes the style.top and style.left attributes of the image to correspond to the event.clientX and event.clientY coordinates of the mouse cursor? Would that do the trick?
Click to expand...

It does, but one little thing that annoys the crap out of me is that IE and Firefox event handling is different.

had to do something like

e = e || window.event

just to get IE to respond. Now trying to figure out why the crap in firefox won't move if it's inside my design (works normal in open page)

*sigh* at least it works in IE and i reckon the client won't bother to check Firefox
 
No! Check cross-browser compatibility, because the client's clients won't necessarily all use IE.

BTW - the code I gave you only works in IE. I'll try and scout for the Firefox/Opera/Safari equivalent as well...
 
I did cross compatibility. But found the reason why it doesn't work is because I do a <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ontop. If I don't have that my div menu's won't work (if I remember correctly) in Firefox.
 
I tried some cross-browser scripts and they seemed to work fine in IE7, Opera 9, Firefox 3, Safari 3 and Google Chrome... Didn't have the DTD in my document though.
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X