| |
| |
|
onFocus
|
| |
O evento onFocus é quando
um objecto se torna activo, isto é,
sempre que activamos uma janela, ou uma
textfiel que fica pronta para receber
texto. Os objectos podem tornar-se activos
com o clique do rato ou com o uso da tecla
"Tab".
Se clicar na zona do texto, irá
se efectuar-se um focus.
|
| |
|
onBlur
|
| |
O evento onBlur executa-se
quando por exemplo uma text field de um
formulário perde o focus. Isto aconteça
quando o utilizador desactiva a text field
clicando fora dela ou utilizando a tecla
"Tab".
Se depois de clicar e/ou escrever na
zona do texto, clica-se fora do documento,
produza-se o evento Blur.
O código é:
<FORM>
<INPUT TYPE=text
onBlur="alert('Isto é um Blur!')">
</FORM>
|
| |
| |
| Gestão de eventos
|
| |
Para ser eficaz, é necessário
que a estes eventos sejam associados as
acções previstas por ti.
É o papel de gestão de eventos.
A sintaxe é:
onEvento="function()"
Por exemplo, onClick="alert('Bem
vindo ao Truques e Dicas')".
De maneira literária, no clicar
do utilizador, abrir uma caixa de aviso
com a mensagem indicada.
|
| |
| onchange |
| |
Este evento é bastante
semelhante ao do onBlur mas com uma pequena
diferença. Não só a
área de texto deve ter perdido o
focus mas também o seu conteúdo
deve ter sido alterado pelo utilizador.
|
| |
| onSelect |
| |
Este evento executa-se quando o utilizador
seleccionou toda ou parte de um texto
numa text field.
|
| |
|
Gestões de eventos disponíveis
em Javascript
|
| |
|
Agora apresento uma lista de objectos que
correspondem a gestões de evento
bem determinado.
|
| |
 |
|
OBJECTO |
|
GESTÕES
DE EVENTOS DISPONÍVEIS |
|
|
|
|
|
| Janela |
| Link
hypertexto |
| Elemento
de texto |
| Elemento
de zona de texto |
| Elemento
botão |
| Botão
Radio |
| Lista
de selecção |
| Botão
Submit |
| Botão
Reset |
|
|
|
|
| onLoad,
onUnload |
| onClick,
onmouseOver, on mouseOut |
| onBlur,
onChange, onFocus, onSelect |
| onBlur,
onChange, onFocus, onSelect |
| onClick |
| onClick |
| onBlur,
onChange, onFocus |
| onClick |
| onClick |
|
|
|
|
|
|
|
|
|
|
|
|
|
| |
| Sintaxe do onmouseOver |
| |
O código de gestão de evento
onmouseOver acrescenta-se nos tags
do de link :
<A HREF="#"
onmouseOver="accao()">link</A>
Assim, quando o utilizador passa com
o rato sobre o link, a função
action() é invocada. O atributo
HREF é indispensável. Ele
pode conter o endereço de uma página
Web se assim o desejares ou simplesmente
o cardinal "#" para que o link
fica activo mas não abra nenhuma
página.
Exemplo: Ao sobrevoar o link "mensagem
importante", uma janela de aviso
abra-se.
O código é :
<BODY>
...
<A HREF="#" onmouseOver="alert('Truques
e Dicas')">mensagem importante</A>
...
<BODY>
Ou se preferes usar os tags <HEAD>
<HTML>
<HEAD>
<SCRIPT language="Javascript">
function mensagem(){
alert("Truques e Dicas")
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onmouseOver="mensagem()">mensagem
importante</A>
</BODY>
</HTML>
|
| |
| Sintaxe do onmouseOver |
| |
Completamente similar ao onmouseOver,
só que o evento se executa quando
o cursor do do rato saia do link ou da
zona sensível.
Pode-se imaginar o código seguinte:
<A HREF="#" onmouseOver="alert('Truques
e Dicas')" onmouseOut="alert('Obrigado
pela visita')">mensagem
importante</A>
Exemplo: Ao sobrevoar o link "mensagem
importante", uma janela de aviso
abra-se.
|
| |
| Troca de imagens |
| |
Com a gestão de eventos onmouseOver,
podemos prever que depois de sobrevoar
uma imagem pelo o utilizador, uma outra
aparece (ambas as
imagem devem ter o mesmo tamanho).
O código é relativamente
simples.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript1.1">
function lightUp() {
document.images["homeButton"].src="button_hot.gif"
}
function dimDown() {
document.images["homeButton"].src="button_dim.gif"
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onmouseOver="lightUp();"
onmouseOut="dimDown();">
<IMG SRC="button_dim.gif"
name="homeButton"
width=100 height=50 border=0> </A>
</BODY>
</HTML>
Completem
sempre em Javascript os atributos
width=x height=y das tuas imagens.
Exemplo:
|
|
| |
| |
|
|
Photoshop
