For the standard shapes of the DHTML cursor (and some CSS sytax for setting the cursor shape), you can look here:
http://www.w3schools.com/css/tryit.asp?filename=trycss_cursor Changing background of the cursor is not so easy. One of the way (at least available in IE 6) is to use the "nonstandard" cursor. The syntax:
style="cursor: url('../new_cursor.cur')"
You cannot use any "normal" graphic format like *.jpg, *.gif, *.png for the customized cursor. You have to use one of the "special cursor" formats: *.cur or *.ani.
You can also try to experiment with the standard shapes of the cursor, and another DHTML layer for changing the background. Something like the following example
<script type="text/javascript">
function popupMove(popup) {
var bkg = document.getElementById("cursorBackground");
popup.style.cursor = 'wait';
bkg.style.cursor = 'wait';
bkg.style.visibility = "";
bkg.style.background = "Red";
bkg.style.top = event.clientY - 8;
bkg.style.left = event.clientX - 8;
}
function popupOut(popup) {
popup.style.cursor = "normal";
document.getElementById("cursorBackground").style.visibility = "hidden";
}
style="position: absolute; z-index: 0; width: 200px; height: 200px;"
onmousemove="popupMove(this)" onmouseout="popupOut(this)">