Como fazer imagens rollover com código HTML

Escrito por scarlett gauthier | Traduzido por josé fabián
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.

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 “Clique aqui” 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.

O que você precisa?

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

Lista completaMinimizar