[TUTORIAL] Mudar imagem ao passar o mouse

Ir para baixo

[TUTORIAL] Mudar imagem ao passar o mouse Empty [TUTORIAL] Mudar imagem ao passar o mouse

Mensagem por seender 22.11.09 19:42

[TUTORIAL] Mudar imagem ao passar o mouse Magic 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




- 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.



- 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:
  1. Mensagem da Home Page:
    Painel de Controle -> Visualização -> Home Page -> Geral -> "Mensagem da Home Page"
  2. 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

  3. Newsletter's (modo HTML)
    Painel de Controle -> Geral -> Newsletter -> Redação e envio
  4. Mensagens Privadas (MP) e mensagens (com HTML ativado para as mensagens) Só terá efeito na determinada mensagem!



- Imagem do resultado:

Imagem normal:
[TUTORIAL] Mudar imagem ao passar o mouse Untitl23

Imagem quando o mouse está sobre ela:
[TUTORIAL] Mudar imagem ao passar o mouse Banner5




© Fórum dos Fóruns



[TUTORIAL] Mudar imagem ao passar o mouse Act_bottom 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
seender
seender
Membro Entusiasta

Membro desde : 07/04/2009
Mensagens : 9449
Pontos : 12455

http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos