[TUTORIAL] Mudar imagem ao passar o mouse

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Mudar imagem ao passar o mouse

Mensagem por seender em 22/11/09, 05:42 pm

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:


Imagem quando o mouse está sobre ela:




© 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
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum