mudar o cursor ao carregar a página
o que eu estou a tentar fazer é mudar o cursor para esperar quando alguma página estiver a carregar.
eu pensei que isto era possível com o css, eu tento conseguir isto quando alguém clica em algum link, então o que eu tenho é isto:
#something a:hover { cursor: hand; }
#something a:active { cursor: wait; }
Ou tenho de usar javascript?
3 answers
A maneira de fazer isto é algo como isto:
Na primeira página (para mostrar logo que o link é clicado):
<a href="http://www.example.com/Page2.html" onclick="document.body.style.cursor='wait'; return true;">
Na segunda página (para mostrar até a nova página terminar de carregar):
<script type="text/javsacript">
//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>
Como 'respondida' diz que pode usar o CSS para anexar o cursor ao elemento html, que deverá cobrir toda a página.
Mas terá de adicionar um ouvinte a cada âncora da página com um onclick, que chama uma função que define o cursor no elemento HTML ou body. Quando a página voltar a carregar, o cursor irá voltar ao valor por omissão, dado que o javascript trhe teria actualizado
var anchors = document.getElementsByTagName("a");
for(var i=0,len=anchors.length;i<len;i++)
{
anchors[i].onclick = function()
{
document.body.style.cursor = "wait";
};
}
O significado da propriedade cursor em relação ao selector de CSS é que, quando o rato estiver sobre um elemento que corresponda ao selector, use então o cursor. Então, para mudar o cursor para o documento global você precisa fazer algo como:
html {
cursor: wait;
}
Obviamente, isto irá mudar o cursor para sempre (ou até o utilizador fechar a página, o que vier primeiro). Para fazer isso dinamicamente você precisa usar javascript:
document.body.style.cursor = 'wait';
Note que cursor:hand só é suportado pelo IE e só é necessário para o IE 5. O nome correcto do cursor é pointer. Claro, se você precisar de suporte IE 5 você precisa usar cursor:hand. Em vez de usar a pesquisa do navegador, poderá usar o nome da classe para mudar o cursor:
CSS:
.handCursor {
cursor: pointer;
cursor: hand;
}
JS:
document.body.className = 'handCursor';