bignose
/
debian_comixcursors


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
							<html>
<head>
<title>CSS cursors test</title>
<style type="text/css">
ul.cursor-demo {
    width: 50%;
}
ul.cursor-demo li {
    margin: 5px;
    padding: 10px 15px;
    border: 1px black solid;
    list-style-type: none;
}
#position {
  cursor: inherit;
  position: absolute;
  z-index: -1;
}
</style>
</head>
<body>

<h1>CSS cursors test</h1>

<p>
Hover over the CSS cursor name to see your browser's cursor style and where the HOTSPOT is. 
</p>

<ul class="cursor-demo">
    <li style="cursor: default">default</li>
    <li style="cursor: crosshair">crosshair</li>
    <li style="cursor: hand">hand</li>
    <li style="cursor: pointer">pointer</li>
    <li style="cursor: not-allowed">not-allowed</li>
    <li style="cursor: move">move</li>
    <li style="cursor: text">text</li>
    <li style="cursor: vertical-text">vertical-text</li>
    <li style="cursor: wait">wait</li>
    <li style="cursor: progress">progress</li>
    <li style="cursor: help">help</li>
    <li style="cursor: no-drop">no-drop</li>
    <li style="cursor: n-resize">n-resize</li>
    <li style="cursor: ne-resize">ne-resize</li>
    <li style="cursor: e-resize">e-resize</li>
    <li style="cursor: se-resize">se-resize</li>
    <li style="cursor: s-resize">s-resize</li>
    <li style="cursor: sw-resize">sw-resize</li>
    <li style="cursor: w-resize">w-resize</li>
    <li style="cursor: nw-resize">nw-resize</li>
    <li style="cursor: all-scroll">all-scroll</li>
    <li style="cursor: col-resize">col-resize</li>
    <li style="cursor: row-resize">row-resize</li>
</ul>

<img id="position" src="positionmarker.png">

<script type="text/javascript">
(function() {
    var tracker = document.getElementById('position');
    document.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
        var dot, eventDoc, doc, body, pageX, pageY;
        event = event || window.event; // IE-ism
        // If pageX/Y aren't available and clientX/Y are,
        // calculate pageX/Y - logic taken from jQuery.
        // (This is to support old IE)
        if (event.pageX == null && event.clientX != null) {
            eventDoc = (event.target && event.target.ownerDocument) || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;
            event.pageX = event.clientX +
              (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
              (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientY +
              (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
              (doc && doc.clientTop  || body && body.clientTop  || 0 );
        }
        // Use event.pageX / event.pageY here
        tracker.style.top = event.pageY;
        tracker.style.left = event.pageX;
    }
})();
</script>
</body>