Question

So what I trying to do is to change the cursor to wait when some page is loading.

I thought this was possible with css, I trying to achieve this when someone click on some link, so what I have is this:

#something a:hover { cursor: hand; }
#something a:active { cursor: wait; }

But this doesn’t work, it’s a hand when hover links, and when for a second is wait, but I want this wait to continue until the new page appear.

So my question is:
Is this wrong? To achieve what I want?
Or do I have to use javascript?

Answer 1

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.