Como fazer imagens rollover com código HTML

Escrito por scarlett gauthier | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer imagens rollover com código HTML
Crie websites dinâmicos com a ajuda de imagens rollover (Jupiterimages/Photos.com/Getty Images)

Com os milhões de websites que existem na internet, é essencial que o seu seja único. Uma técnica usada para adicionar um efeito dinâmico aos sites são as "imagens rollover", também conhecidas como "botões rollover". Essencialmente, quando o visitante passa o mouse por cima de uma imagem, ela muda, e volta a normal quando o mouse é retirado. Isso pode ser usado para alguns efeitos sutis, como alterar a cor da imagem ou a letra. Você pode criar a sua própria imagem rollover com formatação HTML básica em vários programas de design.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

O que você precisa?

  • Software de edição de imagens
  • Software de design web

Lista completaMinimizar

Instruções

  1. 1

    Crie um novo documento do tamanho desejado (em pixels) usando um software de edição de imagens, como por exemplo o Photoshop. Crie as imagens normal e "rollover", que devem ser do mesmo tamanho.

  2. 2

    Salve ambas imagens individualmente, acessando o menu "File" (Arquivo) e selecionando "Save" (Salvar). Use os formatos JPEG, GIF ou PNG. Embora os dois primeiros sejam os mais usados, os PNG retêm a transparência. Certifique-se de salvar a imagem na pasta raíz local do seu site.

  3. 3

    Abra o software de design apropriado, como por exemplo o Adobe Dreamweaver. Clique no botão "Refresh" (Atualizar) da biblioteca para atualizar a biblioteca e a pasta raíz local do seu site. Localize as imagens na pasta raíz.

  4. 4

    Passe para a vista de código da página web.

  5. 5

    Digite “<a href="http://seusite.com"><img src="IMAGEM1" onmouseover="this.src='IMAGEM2'" onmouseout="this.src='IMAGEM1'" alt="Clique aqui"></a>” no código, sem as aspas de início.

  6. 6

    Substitua "http://seusite.com" pelo endereço do seu site. Substitua também "IMAGEM1" e "IMAGEM2" pelos nomes das imagens normal e "rollover" respectivamente.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível