A iluminação de fundo de botões em páginas da Web geralmente é organizada usando duas imagens. Ao passar o cursor do mouse sobre o elemento correspondente do documento (link ou botão), é gerado um evento que, de acordo com as instruções escritas na linguagem CSS, solicita ao navegador a troca de uma imagem por outra. Quando o cursor do mouse é movido para longe do botão, ocorre a substituição inversa.
Necessário
Conhecimento básico de linguagens HTML e CSS
Instruções
Passo 1
Existem várias opções para implementar esse mecanismo de destaque. Para qualquer um deles, você pode usar o mesmo código HTML, alterando apenas a descrição do estilo correspondente. O código HTML do botão pode ter a seguinte aparência: texto no botão Aqui está o identificador deste elemento da página (id = "btnA") ao qual a descrição do estilo será anexada.
Passo 2
Para implementar uma das opções, você precisa preparar duas imagens, uma das quais mostra o botão em um estado inativo e a segunda com uma luz de fundo. Eles serão usados como imagem de fundo do link. As instruções CSS para este botão podem ser assim:
a # btnA, a # btnA: visitado {
display: bloco;
largura: 50px;
altura: 20px;
plano de fundo: url (btnA.gif) sem repetição;
fronteira: 0;
}
a # btnA: hover {
plano de fundo: url (btnA_hover.gif) sem repetição;
fronteira: 0;
}
Aqui, no primeiro bloco, são indicadas as dimensões da imagem que representa o botão (largura: 50px; altura: 20px;). Você precisa substituí-los pelas dimensões de sua imagem. Os nomes dos arquivos de imagem devem ser alterados da mesma maneira: btnA.
etapa 3
Uma alternativa é colocar as duas imagens em uma única foto. Pode ser um acima do outro ou um ao lado do outro. Ele também será usado como plano de fundo para o link. Uma vez que os tamanhos dos botões são especificados na descrição do estilo do botão, qualquer coisa que não se encaixe neles não estará visível. Neste caso, as instruções colocadas na descrição do CSS devem, ao passar o cursor do mouse, rolar a imagem de fundo de forma que a área com a imagem do botão destacado caia no quadro. Para esta opção, o código da etapa anterior deve ser alterado da seguinte forma:
a # btnA, a # btnA: visitado {
display: bloco;
largura: 50px;
altura: 20px;
plano de fundo: url (btnA.gif) sem repetição;
fronteira: 0;
}
a # btnA: hover {
background: url (btnA.gif) sem repetição 21px;
fronteira: 0;
}
Isso pressupõe que você colocou as imagens uma acima da outra (destacadas na parte inferior) e salvou em um arquivo chamado btnA.gif. A altura dos botões é 20 px, a largura é 50 px - você precisa substituir esses valores pelos seus.
