[TUTORIAL] Mudar imagem ao passar o mouse

por **Fry** Sáb Dez 31, 2011 8:29 am

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Efeitos em imagens

Hoje em dia, quanto mais elaborado for as imagens e o tema em geral de nosso fórum, mais atrairemos visitas e novos membros. Pensando nisso, decidimos lhe ensinar como poderá alterar uma imagem quando o mouse estiver sobre ela.

--> Tutoriais e astúcias <--
Mudar imagem ao passar o mouse

1º - Código que deve ser utilizado:
O código é bem simples. No próximo ponto iremos explicar onde o mesmo poderá ser colocado, mas de maneira geral é em qualquer local que aceite códigos HTML.

Para cada imagem com efeito teremos de adicionar este código, somente variando nas partes coloridas:

<img src="ENDERECO_DA_IMAGEM_NORMAL" onmouseout="this.src='ENDERECO_DA_IMAGEM_NORMAL';" onmouseover="this.src='ENDERECO_DA_IMAGEM_AO_PASSAR_O_MOUSE';" />

Vermelho -> Deverá substituir onde estiver em vermelho pelo endereço da imagem que será carregada com a página e também o endereço da imagem que será exibida quando o ponteiro do mouse sair de cima dela.
Verde -> Substitua pelo endereço da imagem que será exibida quando o mouse estiver sobre ela. Somente tenha o cuidado de não colocar uma imagem muito pesada, pois para estas os internautas com conexão lenta irão demorar mais para carregar.

2º - Locais em que este código pode ser utilizado:
Em geral, em qualquer lugar que aceite códigos HTML. Mas, para facilitar, trouxemos uma lista deles:

Mensagem da Home Page:
Painel de Controle -> Visualização -> Home Page -> Geral -> "Mensagem da Home Page"
Widgets (em todos que são possíveis de criar ou modificar):
Painel de Controle -> Módulos -> Portal & Widgets -> Configuração do portal -> Estrutura
ou
Painel de Controle -> Módulos -> Portal & Widgets -> Gestão dos widgets do fórum
Newsletter's (modo HTML)
Painel de Controle -> Geral -> Newsletter -> Redação e envio
Mensagens Privadas (MP) e mensagens (com HTML ativado para as mensagens) Só terá efeito na determinada mensagem!

3º - Imagem do resultado:

Imagem normal:

Imagem quando o mouse está sobre ela:

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Mudar imagem ao passar o mouse