Princípio de produção
O princípio de fazer imagens de troca é a ferramenta Trocar imagem aplicada ao painel de comportamento do Dreamweaver. Configure-o para que quando o mouse passar sobre uma determinada imagem de botão, deixe o próprio botão realizar uma troca de imagem (trocada por uma imagem com texto amarelo) e ao mesmo tempo projete a troca de imagens de ponteiro (trocada por um ponteiro apontando para a imagem atual do ponteiro do botão) para obter o efeito acima.
^-^: Na verdade, algumas coisas na página da web parecem muito misteriosas, mas na raiz disso é apenas uma simples mudança de algumas imagens ou algumas camadas.
materiais de elaboração
O que é demonstrado aqui é a inversão de 7 imagens de botões, então precisamos criar um total de 21 imagens, 14 imagens de botões e 7 imagens de ponteiros, para obter o efeito mostrado. Entre eles, 7 imagens de botão frontal são denominadas B1-1 ~ B1-7 respectivamente, 7 imagens de botão de fundo são denominadas B2-1 ~ B2-7 respectivamente e 7 imagens de ponteiro são denominadas Z1 ~ Z7 respectivamente, e seus ponteiros apontam para Botões um a sete. Você pode usar um software de criação de imagens, como o Fireworks, para criar imagens de botões.
Método de preparação
1. Crie um arquivo de página da web.
2. Insira uma tabela 7×2 e mescle a coluna esquerda das tabelas para inserir a imagem do ponteiro. As sete tabelas à direita são usadas para inserir imagens de botões.
3. Insira a primeira imagem do ponteiro Z1 na tabela à esquerda e insira os botões frontais azuis B1-1 ~ B1-7 nas 7 linhas de células à direita (o efeito é mostrado na Figura 2).
4. Clique em "Janela (Windows) → Comportamento" para abrir o painel de comportamento.
5. Selecione a primeira imagem para definir o comportamento. Aqui está a imagem do botão com "Ideia Orientadora" escrita, que é a imagem B1-1.
6. Clique no botão de adição e selecione Trocar imagem no menu pop-up para abrir a caixa de diálogo de troca de imagem. A parte principal de nossas configurações será feita nesta caixa de diálogo.
7. Clique no botão Procurar na caixa de diálogo e selecione a imagem de destino para a qual a imagem do botão será invertida. Nesse caso, é a imagem do botão com texto amarelo, que é a imagem B2-1. Em seguida, clique em OK.
8. Repita a etapa 6, selecione a imagem do ponteiro Z1 na caixa de texto da imagem e clique no botão Procurar novamente para virá-lo para o primeiro arquivo do ponteiro, Z1. Clique em OK. Após concluir as operações acima, os resultados da exibição no painel de comportamento são mostrados na Figura 3.
9. Selecione a segunda imagem do botão B1-2, coloque-a no botão B2-2 de acordo com o método acima e vire a imagem do ponteiro na segunda imagem do ponteiro Z2.
10. Siga os passos acima e defina as 5 imagens a seguir para o comportamento de troca de imagens.
11. Pressione F12 para visualizar e passar o ponteiro do mouse sobre cada imagem. Que tal, certo?