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
really helpful. thanx brother
Posted on 12:50 PM, January 28, 2012
This is great sample, I'll use it
Thank's for share
Posted on 4:24 PM, June 02, 2013
Great work! Thanks for your share.
Posted on 8:28 PM, August 18, 2013
great technique, thanks for posting this :)
Posted on 3:44 AM, November 22, 2014