Usando mouseover na web
Um efeito muito utilizado hoje em dia é o "mouseover", em que uma imagem é trocada por outra quando o mouse está em cima dela. Dê uma olhada no exemplo abaixo.
Clique para ver o exemplo
Veja o código utilizado:
<script>
if (document.images) {
var imagemoff = new Image();
imagemoff.src= "b09112001.gif";
var imagemon = new Image();
imagemon.src= "b16082000.gif";
}
function mouseemcima() {
if (document.images) {
document.imagem.src = imagemoff.src;
}
}
function mousefora() {
if (document.images) {
document.imagem.src = imagemon.src;
}
}
</script>
<img src="b16082000.gif" onMouseOver="mouseemcima()" onMouseOut="mousefora()" name = "imagem">
Observações:
há outras maneiras de fazer este mesmo efeito, como inserir os event handlers onMouseOver e onMouseOut no próprio comando da imagem. Fica a cargo de vocês descobrir mais
no comando <img> foram inseridas as funções mouseemcima e mousefora, que estão especificadas dentro do comando <script>
ainda no comando <img> foi inserido o atributo name (no caso, imagem). Ele também é usado dentro do <script>, na linha document.imagem.src.
