Home Importante! História Tutorial HTML Glossário Faqs Buscadores Sinapse
Fóruns ASCII Cores JavaScript CSS Links Novidades Browsers Conclusão
  T u t o r i a l   D H T M L / C S S   E d a u r e l i o
            2 0 0 -  2 0 0 4

D ynamic H yper T ext M arkup L anguage

SCRIPT
Alterando o formato do cursor
Link que altera o cursor
Anexando objetos ao cursor

 

<SCRIPT>...</SCRIPT>

status="mensagem"
Exibe uma mensagem que aparece na barra de status do Windows. Você pode alterar essa mensagem como quiser, basta determinar entre os parâmetros <script>status="..."</script> a mensagem que quer que apareça.

Por exemplo: Esta página está configurada com a mensagem Anavilhanas são ilhas do rio Amazonas:

Sintaxe:
<SCRIPT>
status="Anavilhanas são ilhas do rio Amazonas"
</SCRIPT>

Agora observe o canto inferior esquerdo do seu monitor. A mensagem está lá. Movimente o cursor sobre outras âncoras e o status irá mudar mas quando você desloca para qualquer outro ponto da tela o default Anavilhanas... retorna.

defaultstatus="mensagem"
Mostra uma mensagem quando nenhuma outra está sendo exibida.

Obviamente estes parâmetros só funcionam no Internet Explore.

 

ALTERANDO O FORMATO DO CURSOR

Se você está usando o Internet Explore v4.0 ou o Netscape v6.0, você tem o recurso de alterar o formato do cursor. Basta acrescentar ao comando HREF o parâmetro STYLE="cursor:tipo_do_cursor".

FIGURA NOME NS IE COMANDO
Interrogação 6+ 4+ cursor:help
Cruz 6+ 4+ cursor:crosshair
Cursor padrão 6+ 4+ cursor:default
Não padrão 6+ 4+ cursor:hand
Cruz com setas 6+ 4+ cursor:move
Seta para o norte 6+ 4+ cursor:n-resize
Seta para o nordeste 6+ 4+ cursor:ne-resize
Seta para o leste 6+ 4+ cursor:e-resize
Seta para o sudeste 6+ 4+ cursor:se-resize
Seta para o sul 6+ 4+ cursor:s-resize
Seta para o sudeste 6+ 4+ cursor:sw-resize
Seta para o oeste 6+ 4+ cursor:w-resize
Seta para o noroeste 6+ 4+ cursor:nw-resize
Inserção horizontal 6+ 4+ cursor:text
Ampulheta 6+ 4+ cursor:ne-wait
Tempo progressivo 6+ cursor:progress
Acesso proibido 6+ cursor:not-allowed
6+ cursor:no-drop
Inserção vertical 6+ cursor:ne-resize
6+ cursor:all-scroll
Ajuste de coluna 6+ cursor:col-resize
Ajuste de linha 6+ cursor:row-resize
Um arquivo específico 6+ 6+ cursor:url(...)

 

LINK QUE ALTERA O CURSOR

No último caso da tabela acima a propriedade cursor:url(...) especifica um arquivo.ani a escolher. Por exemplo: Vou configurar o link Tutorial com o arquivo 3db2ap11.ani.

TUTORIAL

<A HREF="tutorial.htm" STYLE="cursor:url(imagens/3db2ap11.ani)">TUTORIAL</A>

Para mudar definitivamente o cursor de uma página basta usar a classe de estilo inserindo body {cursor:url( ... )} entre as tags <HEAD> ... </HEAD>. Por exemplo: Configurei as páginas desta HP com este belo cursor verde, ele é o arquivo 3dgarrom.cur que está no meu subdiretório imagens. Este cursor só irá funcionar neste homepage, de modos que, quando você clicar num link ou fechar a página ele voltará ao cursor normal configurado em seu sistema operacional.

<HEAD>
<STYLE TYPE="text/css">
body {cursor:imagens/3dgarrom.cur}
</STYLE>
</HEAD>

 

ANEXANDO OBJETOS AO CURSOR

Agora vou mostrar como vincular um arquivo de imagem ao cursor de modo que, ao movimentar o cursor, o arquivo de imagem o acompanhará. O arquivo que vou usar como exemplo é o 3sun6c.gif.  
3sun6c.gif

PRIMEIRO:
Insira o script JavaScript (à direita) entre as tags <HEAD>...</HEAD> do arquivo onde o efeito deve acontecer.

 
<script type="text/javascript">
function cursor()
{
trail.style.visibility="visible"
trail.style.position="absolute"
trail.style.left=event.clientX+10
trail.style.top=event.clientY
}
</script>

SEGUNDO:
Neste mesmo arquivo acrescente entre os demais parâmetros da tag BODY o parâmetro onmousemove="cursor()". Então a BODY do arquivo ficará mais ou menos assim:

<BODY text="#000000" link="#0000ee" vlink="#551a8b" alink="#ff0000 onmousemove="cursor()">

TERCEIRO:
E por último insira em qualquer lugar do arquivo (de preferência quase no fim, antes de </BODY>) a chamada para o arquivo 3sun6c.gif, que irá seguir o cursor incansavelmente.

<IMG ID="trail" STYLE="visibility:hidden" SRC="imagens/3sun6c.gif" WIDTH="64" HEIGHT="64">

Repare que configurei WIDTH="64" HEIGHT="64" exatamente com o tamanho do arquivo. Agora vamos ao teste do exemplo:

Uma opinião minha: O webmaster deve tomar cuidado ao usar este tipo de efeito para incrementar sua HP porque ele pode acabar torrando a paciência do internauta que ao movimentar o cursor tem esse objeto atrapalhando ou distraindo sua atenção.

 

Home Importante! História Tutorial HTML Glossário Faqs Buscadores Sinapse
Fóruns ASCII Cores JavaScript CSS Links Novidades Browsers Conclusão
© Free Copyright - edaurelio@hotmail.com - Arquivo atualizado em 28/08/04