JavaScript permite que um site para responder a eventos do usuário , mudando o conteúdo de uma página com base em diversas ações do mouse e teclas. Menus e botões muitas vezes servem como gatilhos para essas mudanças , mas DIVs pode ser igualmente sensível . A DIV é uma tag HTML que serve como um recipiente para outro conteúdo , como texto e fotos. Passar o mouse sobre qualquer parte do DIV pode desencadear uma mudança. Movendo o mouse para fora da DIV pode desencadear outra. Instruções
1
Insira uma função auxiliar entre suas marcas na cabeça que permite que o seu trabalho de script em todos os navegadores . A função irá adicionar ouvintes de eventos a elementos HTML na página. Quando é chamado , a função de ajudante recebe três argumentos , ou conjuntos de instrução: . O elemento de destino , tipo de evento e função a ser chamada
função addEvent (obj , tipo, fn ) {
if ( obj.attachEvent ) {
obj [' e' + tipo + fn ] = fn ;
obj [ tipo + fn ] = function () { obj [' e' + digite + fn ] ( window.event );}
obj.attachEvent ( 'on' + tipo , obj [ tipo + fn ]);
} else
obj . addEventListener (tipo, fn , false); }
2
Crie uma função entre as tags cabeça que usa o evento de carga, ou o carregamento da página na janela , para chamar a função " testMouse " . Isto irá anexar dois ouvintes de eventos para o seu DIV :
window.onload = testMouse ;
3
Criar funções que irão resultar na cor de sua DIV mudando na página baseado nos eventos mouseover e mouseout . Comece criando " testMouse ", que terá a DIV por sua ID de " testDiv ". Ouça os eventos mouseover ou mouseout e chamar o " addColor " ou funções " removeColor " , respectivamente. Criar as funções " addColor " e " removeColor " que mudam a cor de fundo
função testMouse () { var
divField = document.getElementById ( " testDiv "); .
addEvent ( divField , " mouseover " , addColor );
addEvent ( divField , ' mouseout ' , removeColor );
}
função addColor () {
var removeColor () { var
divField = document.getElementById ( " testDiv ");
divField.style.backgroundColor = ""; }
4
Coloque as tags DIV e texto de amostra entre as tags body do documento :
texto aqui texto aqui texto aqui.
5
estilos CSS para o seu lugar entre as tags dIV cabeça para torná-lo um tamanho fixo e dar-lhe um fundo azul :
6
Salve sua página e abri-lo em um navegador para testar seu código. Passar o mouse sobre o seu DIV deve transformá-lo de azul para cinza . . Movendo o mouse para fora da DIV deve transformá-lo de volta ao cinza
O código completo deve ser semelhante a este :
