Oficina da Net

Subscreva nosso RSS - Assine o RSS e receba as novidades do site em seu leitor.

Oficina da Net » Programação » JavaScript

Criando Rollovers com JavaScript

Publicado em: 29/11/2007 | JavaScript | Visualizações: 1.841 | 1 Comentário(s)

Versão para

Para entender melhor a aplicação dos rollovers, digite o código abaixo no bloco de notas e salve como rollovers.html.

<html>

<head>

   <title>Meu Primeiro Rollover em JavaScript</title>

</head>

<body>

<p><b>Meu Primeiro Rollover em JavaScript</b></p>

<p><img border="0" src="../../../bart.jpg" width="254" height="425"></p>

</body>

</html>

Obs.: No parâmetro SRC você deve indicar o local onde se encontra a imagem que você irá utilizar.

Quando o ponteiro do mouse passar sobre a imagem ela deverá ser trocada e quando for retirado da figura deverá voltar a apresentar a imagem anterior.

É importante lembrar que as imagens não aceitam os handlers de evento “ONMOUSEOVER” e “ONMOUSEOUT”. Sendo assim, as imagens terão que ser colocadas dentro de um link, que aceitam os handlers.

Abra o código digitado acima e acrescente a ele as linhas em negrito do código abaixo.

<html>

<head>

   <title>Meu Primeiro Rollover em JavaScript</title>

</head>

<body>

<p><b>Meu Primeiro Rollover em JavaScript</b></p>

<p><a href= "#" 

onmouseover = "document.bart.src = '../../../homer.jpg';"

onmouseout = "document.bart.src = '../../../bart.jpg';">

<img border="0" src="../../../bart.jpg" width="254" height="425" name = "bart"></p>

</body>

</html>

Note que as imagens são diferentes para cada um dos handlers.

Assim concluímos a criação de rollovers, viram como é fácil?!

Até a próxima...

compartilhe