image follow the pointer inside a div

[Kikocabas]

Hi folks.I want to have an image following the mouse but only inside a specific div inside one post, not in all the page. How could I do that?I have the following code for the image in all the web:

Code:

<script type="text/javascript">//<![CDATA[var trailimage=["http://img197.imageshack.us/img197/5277/estrellab.gif", , ]var offsetfrommouse=[12,10]var displayduration=0if (document.getElementById || document.all)document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:100px;width:1px;height:1px"><img border="0" src="'+trailimage[0]+'"></div>')function gettrailobj(){if (document.getElementById)return document.getElementById("trailimageid").styleelse if (document.all)return document.all.trailimagid.style}function truebody(){return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function hidetrail(){gettrailobj().visibility="hidden"document.onmousemove=""}function followmouse(e){var xcoord=offsetfrommouse[0]var ycoord=offsetfrommouse[1]if (typeof e != "undefined"){xcoord+=e.pageXycoord+=e.pageY}else if (typeof window.event !="undefined"){xcoord+=truebody().scrollLeft+event.clientXycoord+=truebody().scrollTop+event.clientY}var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)gettrailobj().display="none"elsegettrailobj().display=""gettrailobj().left=xcoord+"px"gettrailobj().top=ycoord+"px"}document.onmousemove=followmouseif (displayduration>0)setTimeout("hidetrail()", displayduration*1000)//]]></script>

Thanks a lot!

[justsomeguy]

The followmouse function would probably have to get the div element that you're targeting and figure out what its coordinate area inside the page is, and if the mouse cursor is outside of that coordinate area then the function would just quit instead of moving the image. So it would end up moving the image as long as the mouse is in the div, and when the mouse leaves the div the image would stay where it is until the mouse goes back to the div.

[Kikocabas]

Yes, this is what I want. But I have no clue how to whrite the code for do it.

Any help?

 

Thanks a lot!

[justsomeguy]

Well, just take it one step at a time, starting with putting the div on the page and getting a reference to it. How much Javascript do you know?

[Hadien]

I wrote a similar thing when I was learning HTML5 canvas. I was making the illusion of two eyeballs following the cursor while in the dark grey div. Slightly more advanced since I didn't want the "pupils" to follow cursor off of the eyeballs, so I added a little trigonometry(arctangent) that slows down the pupils to a point were they stop following cursor when it reaches a certain distance.Canvas EyeballsSimply add a onmouseover event on the controlling div. While the mouse is over the div, it will continually call the function that will move the image. Once the mouse leaves the div's boundaries, it will stop making the call and thus stop moving the image. The onmouseover event can pass an object which will have the mouse's coordinates. You can then use something like absolute positioning and tie the mouse coordinates to the image's top and left styles.

[davej]

Oops, this thread is duplicated.

[Kikocabas]

Solved by davej,

Thaks guys for youre answers and time!