Only IE can support .ani and .gif animated cursor. All other browsers like Firefox, Maxthon, Opera, Safari, Chrome are not support animated cursor. If you still want to show animated cursor on all browsers, you can use Javascript to make an animated picture to follow the movement of the mouse cursor. The complete codes are below :

Remember change the value of 3 variables below to fit your need :
<script type="text/javascript">
var trailimage=["http://2aek.com/images/cursors/cur1.gif", 32, 32] //image path, plus width and height
var offsetfrommouse=[8,27] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0 //duration in seconds image should remain visible. 0 for always.

if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:0px;width:1px;height:1px"><img src="'+trailimage[0]+'" border="0" width="'+trailimage[1]+'px" height="'+trailimage[2]+'px"></div>')

function gettrailobj(){
if (document.getElementById)
return document.getElementById("trailimageid").style
else 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.pageX
ycoord+=e.pageY
}
else if (typeof window.event !="undefined"){
xcoord+=truebody().scrollLeft+event.clientX
ycoord+=truebody().scrollTop+event.clientY
}
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var 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"
else
gettrailobj().display=""
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}

document.onmousemove=followmouse
if (displayduration>0)
setTimeout("hidetrail()", displayduration*1000)
</script>


If you want to add this codes to your blogspot layout, you will have a lot of problem because blogspot html editor cannot accept some syntax of the codes. So it is better you write the code on a notepad file, save the file as blablabla.js then you link your blogspot to the js file. I did it for my own blog too. Here is my code : <script src='http://2aek.com/images/cursors/cursor.js' type='text/javascript'/>.


Posted by Zac1987 on 14 January, 2011

4 comments

  1. hathurwala Said,

    really helpful. thanx brother

    Posted on 12:50 PM, January 28, 2012

     
  2. farhan Said,

    This is great sample, I'll use it
    Thank's for share

    Posted on 4:24 PM, June 02, 2013

     
  3. Anonymous Said,

    Great work! Thanks for your share.

    Posted on 8:28 PM, August 18, 2013

     
  4. Anonymous Said,

    great technique, thanks for posting this :)

    Posted on 3:44 AM, November 22, 2014

     







Enter your email address:

Subscribe in a reader

Follow zac1987 on Twitter

Chatting Box

Donation

If you feel my website is informative and it is useful for you, please donate some money to support me or buy me a drink. I will continues this good works. Thank you.