[TUTORIAL] Mudar imagem ao passar o mouse
Página 1 de 1
[TUTORIAL] Mudar imagem ao passar o mouse
![]() | Efeitos em imagens |
--> Tutoriais e astúcias <--
Mudar imagem ao passar o mouse
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:
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.<img src="ENDERECO_DA_IMAGEM_NORMAL" onmouseout="this.src='ENDERECO_DA_IMAGEM_NORMAL';" onmouseover="this.src='ENDERECO_DA_IMAGEM_AO_PASSAR_O_MOUSE';" />
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:
![[TUTORIAL] Mudar imagem ao passar o mouse Untitl23](https://i.servimg.com/u/f81/11/81/27/88/untitl23.png)
Imagem quando o mouse está sobre ela:
![[TUTORIAL] Mudar imagem ao passar o mouse Banner5](https://2img.net/i/fa/banner/pt/banner5.png)
![[TUTORIAL] Mudar imagem ao passar o mouse Untitl23](https://i.servimg.com/u/f81/11/81/27/88/untitl23.png)
Imagem quando o mouse está sobre ela:
![[TUTORIAL] Mudar imagem ao passar o mouse Banner5](https://2img.net/i/fa/banner/pt/banner5.png)
© Fórum dos Fóruns
![]() | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Mudar imagem ao passar o mouse |
![-](https://2img.net/i/fa/fdf3/moins10.png)
» Mudar imagem ao passar o Mouse porém tem que mudar a imagem do Frame
» Mudar imagem ao passar o mouse
» [TUTORIAL] Link com texto ao passar o mouse
» Mudar imagem ao passar o mouse
» [Resolvido] Mudar imagem ao passar o mouse
» Mudar imagem ao passar o mouse
» [TUTORIAL] Link com texto ao passar o mouse
» Mudar imagem ao passar o mouse
» [Resolvido] Mudar imagem ao passar o mouse
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos