|
CS479/579 - Web Programming II
|
Displaying ./code/CSS/cursors.html
<!DOCTYPE html>
<html>
<head>
<meta charset='ascii'>
<title> Mouse Cursors </title>
<style>
table { border-collapse: collapse; }
td { width: 100px; height: 100px; text-align: center;}
body { transform: rotate3d(1,1,1,80deg); overflow: hidden}
</style>
<script>
var deg=0;
function rotate() {
document.body.style.transform = "rotate3d(1,1,1,"+deg+"deg)";
deg = (deg + 1) % 360;
// setTimeout(rotate, 10);
}
</script>
</head>
<body onload='rotate();'>
<h1> Mouse Cursors </h1>
<table border=1>
<tr>
<td style='cursor: alias'> alias
<td style='cursor: all-scroll'> all-scroll
<td style='cursor: auto'> auto
<td style='cursor: cell'> cell
<td style='cursor: context-menu'> context-menu
<td style='cursor: col-resize'> col-resize
<td style='cursor: copy'> copy
<td style='cursor: crosshair'> crosshair
<tr>
<td style='cursor: default'> default
<td style='cursor: e-resize'> e-resize
<td style='cursor: ew-resize'> ew-resize
<td style='cursor: grab'> grab
<td style='cursor: grabbing'> grabbing
<td style='cursor: help'> help
<td style='cursor: move'> move
<td style='cursor: n-resize'> n-resize
<tr>
<td style='cursor: ne-resize'> ne-resize
<td style='cursor: nesw-resize'> nesw-resize
<td style='cursor: ns-resize'> ns-resize
<td style='cursor: nw-resize'> nw-resize
<td style='cursor: nwse-resize'> nwse-resize
<td style='cursor: no-drop'> no-drop
<td style='cursor: none'> none
<td style='cursor: not-allowed'> not-allowed
<tr>
<td style='cursor: pointer'> pointer
<td style='cursor: progress'> progress
<td style='cursor: row-resize'> row-resize
<td style='cursor: s-resize'> s-resize
<td style='cursor: se-resize'> se-resize
<td style='cursor: sw-resize'> sw-resize
<td style='cursor: text'> text
<td style='cursor: url(cursor-3.png),auto;'> Custom (URL)
<tr>
<td style='cursor: vertical-text'> vertical-text
<td style='cursor: w-resize'> w-resize
<td style='cursor: wait'> wait
<td style='cursor: zoom-in'> zoom-in
<td style='cursor: zoom-out'> zoom-out
<td style='cursor: initial'> initial
<td style='cursor: inherit'> inherit
</table>
</body>
</html>
|