change cursor when loading page

The way to do this is something like this:

On the first page (to show as soon as the link is clicked):

<a href="http://www.example.com/Page2.html" onclick="document.body.style.cursor='wait'; return true;">

---

On the second page (to show until the new page finishes loading):

<script type="text/javascript">
    // Set the cursor ASAP to "Wait"
    document.body.style.cursor='wait';

    // When the window has finished loading, set it back to default...
    window.onload=function(){document.body.style.cursor='default';}
</script>

Note that the page is loaded sequentially so the closer to the top of your second page the cursor='wait' line is, the less delay there will be in showing the cursor on the new page.

As 'answered' says you can use CSS to attach the cursor to the html element, which should cover the whole page.

But you'll need to add a listener to every single anchor in the page with an onclick, which calls a function that sets the cursor on the HTML or body element. When the page reloads the cursor will go back to default again as the javascript would've refreshed

var anchors = document.getElementsByTagName("a");
for (var i=0,len=anchors.length; i<len; i++) {
  anchors[i].onclick = function() {
    document.body.style.cursor = "wait";
  };
}

The meaning of the cursor property in relation to CSS selector is that when the mouse is over an element matching the selector then use the cursor. So to change the cursor for the overall document you need to do something like:

html {
    cursor: wait;
}

Obviously, this will change the cursor forever (or until the user closes the page, whichever comes first). To do this dynamically you need to use javascript:

document.body.style.cursor = 'wait';

Note that cursor:hand is only supported by IE and only needed for IE 5. The correct cursor name is pointer. Of course, if you need to support IE 5 you need to use cursor:hand. Instead of using browser sniffing you can use class name to change cursor:

CSS:

.handCursor {
    cursor: pointer;
    cursor: hand;
}

JS:

document.body.className = 'handCursor';