Jump to content
Sign in to follow this  
Kikocabas

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:

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!

Share this post


Link to post
Share on other sites

You can look at this...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Mouse Follow</title><style>#env{height: 600px;border:1px dotted #aaa;}#targ{position: relative;top: 0px;left: 0px;width: 100px;height: 100px;color: red;background-color: #eee;opacity: 0.9;border-radius: 50px;border: 1px solid red;}#active{width:300px;height:300px;margin:0 auto;background-color:#ca3;overflow:hidden;}</style><script>window.onload = function() { document.onmousemove = follow;}function follow(e){var a = document.getElementById('active').getBoundingClientRect();//alert(a.top+':'+a.left+'=='+e.clientX+':'+e.clientY);if ((e.clientX<a.left)||(e.clientX>a.right)||(e.clientY<a.top)||(e.clientY>a.bottom)) return;//  var e = e || window.event;//supports old browsers?  e.preventDefault(); //prevents text selection  var t = document.getElementById('targ');  var m = document.getElementById('msg');  t.style.left  = ((e.clientX-a.left) - 50) + 'px';  t.style.top = ((e.clientY-a.top) - 50) + 'px';  m.innerHTML = 'Client:( ' + e.clientX + ', ' + e.clientY + ' )<br>Screen:( ' + e.screenX + ', ' + e.screenY +' )';}</script></head><body><div id="env"><div id="msg"></div><div id="active"><div id="targ"></div></div></div></body></html>

Share this post


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.

Guest
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.

Loading...
Sign in to follow this  

×
×
  • Create New...