Como fazer imagens rollover com código HTML

Contente

Instruções
O que você precisa

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)

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.
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.
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.
Passe para a vista de código da página web.
Digite “
” no código, sem as aspas de início.
Substitua "http://seusite.com" pelo endereço do seu site. Substitua também "IMAGEM1" e "IMAGEM2" pelos nomes das imagens normal e "rollover" respectivamente.