Tutorial para criar uma imagem de rolagem no Dreamweaver

Uma imagem de sobreposição é uma imagem que muda para outra imagem quando você ou seu cliente passa o mouse sobre ela. Estes são comumente usados ​​para criar uma sensação interativa, como botões ou guias. Mas você pode criar imagens de sobreposição de praticamente qualquer coisa.

Este tutorial foi criado para ajudar você a criar uma imagem de rolagem no Dreamweaver. Destina-se ao uso por pessoas que usam as seguintes versões do Dreamweaver:

• Dreamweaver MX
• Dreamweaver MX 2004
• Dreamweaver 8
• Dreamweaver CS3
• Dreamweaver CS4
• Dreamweaver CS5
• Dreamweaver CS6

Requisitos para este tutorial

• DreamweaverUma das versões listadas acima.
• Uma imagem originalCertifique-se de otimizar esta imagem. Isso ajudará suas páginas a carregar mais rapidamente.
• A imagem de rolloverEssa imagem deve ter as mesmas dimensões da imagem original. E, como a imagem original, deve ser otimizada para ajudar nos tempos de carregamento da página.
• Uma página webEsta é a página HTML onde você colocará sua imagem de rollover.

Iniciar

1. Inicie o Dreamweaver
2. Abra a página da web onde você quer que seu rollover

Inserir um objeto de imagem de rolagem

O Dreamweaver facilita a criação de uma imagem de rolagem.

1. Vá para o menu Inserir e para baixo até o Objetos de Imagem submenu.
2. Selecione Rolagem de imagem ou Imagem de rolagem.

Algumas versões mais antigas do Dreamweaver chamam as imagens interativas de objetos de imagem.

Diga ao Dreamweaver quais imagens usar

O Dreamweaver abre uma caixa de diálogo com os campos que você precisa preencher para criar sua imagem de rollover.

Nome da imagem

Escolha um nome de imagem exclusivo para a página. Deve ser tudo uma palavra, mas você pode usar números, sublinhados (_) e hífens (-). Isso será usado para identificar a imagem a ser alterada.

Imagem original

Esta é a URL ou localização da imagem que será iniciada na página. Você pode usar URLs de caminho relativo ou absoluto nesse campo. Esta deve ser uma imagem existente no seu servidor da Web ou que você carregará com a página.

Imagem de rolagem

Esta é a imagem que aparecerá quando você passar o mouse sobre a imagem. Assim como a imagem original, isso pode ser um caminho absoluto ou relativo para a imagem, e deve existir ou ser carregado quando você fizer o upload da página.

Imagem de rolagem de pré-carregamento

Essa opção é selecionada por padrão porque ajuda a sobreposição a aparecer mais rapidamente. Ao optar por pré-carregar a imagem de rollover, o navegador da Web a armazenará em cache até o mouse passar por ela.

Texto alternativo

Um bom texto alternativo torna suas imagens mais acessíveis. Você deve sempre usar algum tipo de texto alternativo ao adicionar imagens.

Quando clicado, vá para URL

A maioria das pessoas clicará em uma imagem quando vir uma em uma página. Então você deve ter o hábito de torná-los clicáveis. Esta opção permite que você especifique a página ou o URL para levar o visualizador até quando clicar na imagem. Mas essa opção não é obrigatória para criar um rollover.

Quando você tiver concluído todos os campos, clique em Está bem para que o Dreamweaver crie sua imagem de rollover.

O Dreamweaver escreve o JavaScript para você

Se você abrir a página no modo de exibição de código, verá que o Dreamweaver insere um bloco de JavaScript no do seu documento HTML. Este bloco inclui as 3 funções necessárias para que as imagens sejam trocadas quando o mouse passar por elas e a função de pré-carregamento se você optou por isso.

função MM_swapImgRestore ()função MM_findObj (n, d)função MM_swapImage ()função MM_preloadImages ()

Dreamweaver Adiciona o HTML para o rollover

Se você optou por fazer com que o Dreamweaver pré-carregasse as imagens de rollover, você verá o código HTML no corpo do documento para chamar o script de pré-carregamento para que as imagens sejam carregadas mais rapidamente.

onload = "MM_preloadImages ('shasta2.jpg')"

O Dreamweaver também adiciona todo o código da sua imagem e a vincula (se você incluir um URL). A parte de rollover é adicionada à tag de âncora como atributos onmouseover e onmouseout.

onmouseout = "MM_swapImgRestore ()"onmouseover = "MM_swapImage ('Imagem1', '', 'shasta1.jpg', 1)"

Teste a rolagem

Veja a imagem de rollover totalmente funcional e saiba o que está na mente de Shasta.