Mouseover the image to cycle through the different cursors.
The cursor name is displayed on the status bar.
<html>
<head>
<script type='text/javascript'><!--
var d1, c=0;
var cursors = new Array(
'pointer',
'default',
'auto',
'crosshair',
'hand',
'move',
'e-resize',
'ne-resize',
'nw-resize',
'n-resize',
'se-resize',
'sw-resize',
's-resize',
'w-resize',
'text',
'wait',
'help'
);
window.onload = function() {
d1 = document.getElementById('D1');
d1.onmouseover = doCursor;
}
function doCursor() {
window.status = 'cursor: ' + cursors[c];
d1.style.cursor = cursors[c++];
if (c >= cursors.length) c = 0;
}
//--></script>
</head>
<body>
<h3>CSS Cursors</h3>
<p>Mouseover the image to cycle through the different cursors.
The cursor name is displayed on the status bar.</p>
<span id='D1'><img src='myimg.jpg' width='100' height='100'></span>
<p>Here's the source for this page:</p>
<p><a href="http://mfoster.com/">Mike Foster</a></p>
</body>
</html>
