Jump to content

image follow the pointer inside a div

Recommended Posts

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:

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...