Kikocabas Posted October 23, 2013 Share Posted October 23, 2013 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! Link to comment Share on other sites More sharing options...
davej Posted October 23, 2013 Share Posted October 23, 2013 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> Link to comment Share on other sites More sharing options...
Kikocabas Posted October 24, 2013 Author Share Posted October 24, 2013 Thanks a lot!! That's exactly what I was looking for! (sorry about duplicated post by the way) Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now