I create JavaScript for get mouse coords.
Script for show image by mouse coords (animated cursor script (с) Zac Ang Eng Keat):
<html>
<head>
<title>Cursor</title>
<script type="text/javascript">
document.body.style.cursor = 'none';
var trailimage=["http://2aek.com/images/cursors/cur1.gif", 32, 32] //image path, plus width and height
var offsetfrommouse=[0,0] //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]
xcoord+=e.pageX
ycoord+=e.pageY
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>
</head>
<body>
Press F11 (make the browser window full screen) in Firefox
</body>
</html>
But, it have some problem: if in Firefox I changed fullscreen mode, image get incorrect coords.
I tried to use screenX and screenY instead pageX and pageY, but it need to somehow get moment of change fullscreen mode.
Update:
<html>
<head>
<title>Cursor</title>
<script type="text/javascript">
var isFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) || (typeof InstallTrigger !== 'undefined');
function isFullScreen() { //helper func to detect if Firefox is in fullscreen
if (window['fullScreen'] !== undefined) return window.fullScreen; //Firefox support this property
return (screen.width == window.innerWidth) && (window.screenY == 0 || window.screenTop == 0) && Math.abs(screen.height - window.innerHeight) < 45;
}
document.body.style.cursor = 'none';
var trailimage = ["http://2aek.com/images/cursors/cur1.gif", 32, 32] //image path, plus width and height
var offsetfrommouse = [0, 0] //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 = "";
}
var last_screenX = -1, last_screenY = -1;
var deltaX = 0, deltaY = 0;
function followmouse(e) {
var xx = e.pageX, yy = e.pageY;
if (isNaN(xx) && isFirefox) { //its called from window_resize
//if (isFullScreen())
xx = last_screenX + window.scrollX;
yy = last_screenY + window.scrollY;
if (!isFullScreen()) { //exit from fullscreen
//alert("exit");
xx -= deltaX;
yy -= deltaY;
}
}
//msg.innerHTML = "clientY: "+e.clientY+", pageY: "+e.pageY+", scrnY: "+e.screenY+", win.screenY: "+window.screenY;
var xcoord = xx + offsetfrommouse[0];
var ycoord = yy + offsetfrommouse[1];
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";
if (!isNaN(e.screenX)) {
last_screenX = e.screenX;
last_screenY = e.screenY;
}
if((e.screenY - e.clientY) > 5) { //not fullscreen. (in fullscreen it is 0 or 1)
deltaX = e.screenX - e.clientX;
deltaY = e.screenY - e.clientY;
}
}
document.onmousemove = followmouse;
window.onresize = followmouse; // *** new event handler is add
if (displayduration > 0)
setTimeout("hidetrail()", displayduration * 1000);
</script>
</head>
<body>
Press F11 (make the browser window full screen) in Firefox
</body>
</html>