Mais
×

Como fazer imagens rollover com código HTML

Atualizado em 17 abril, 2017

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

Crie websites dinâmicos com a ajuda de imagens rollover (Jupiterimages/Photos.com/Getty Images)
  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. 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. 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. Passe para a vista de código da página web.

  5. Digite “Clique aqui” no código, sem as aspas de início.

  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
Cite this Article A tool to create a citation to reference this article Cite this Article