Como criar um rollover de imagem em css

Criar as duas imagens necessárias para a sua imagem de sobreposição em seu software de edição gráfica e salvá-los como arquivos JPG. Certifique-se de ambas as imagens têm as mesmas dimensões de pixel exatas e a mesma quantidade, se houver, do espaço vazio em torno do gráfico em cada arquivo jpg.

Crie um novo documento gráficos a mesma largura que as suas imagens e exatamente o dobro da altura de qualquer um.

Cole as duas imagens para o novo documento. Coloque a imagem da imagem em movimento inicial na parte superior e na parte de baixo para eles devem ser perfeitamente horizontalmente alinhados um com o outro e ocupam todo o espaço disponível no documento. Salve este novo arquivo como um jpg e nomeá-la algo descritivo como rolloverimage.jpg. Este é o único arquivo de imagem que você usará para o rollover- você não precisa os dois originais.

Carregar a imagem para o seu site ou para um serviço de hospedagem de imagens grátis e salvar a sua URL completa.

Abra o documento HTML em um processador de texto e localizar as tags de cabeçalho ( e ). Eles devem estar no topo do documento.

Adicionar marcas de estilo CSS entre as tags de cabeça, se eles já não estão presentes. As tags deve olhar como este:.

Adicione código CSS entre as marcas de estilo para definir o comportamento inicial de sua imagem de sobreposição. O código básico para isso é a. {Display: largura BLOCO: px; Altura: px; background: url () no-repeat 0 0- overflow: hidden- text-indent: -10000px; font-size: 0px; line-height: 0px;}.

Adicione os valores necessários para o código CSS para torná-lo aplicar-se a sua imagem. Adicione o valor de pixel de largura do seu arquivo rolloverimage.jpg pouco antes da primeira px, o valor de pixel de metade da altura do arquivo, pouco antes da segunda px e URL completa do arquivo de imagem entre o parêntese.

Defina um nome para a classe CSS da imagem de rollover. Isto é o que você vai usar para indicar o código HTML que a imagem deve usar o CSS que você acabou de entrar, e pode ser qualquer palavra única que você quer. Digitar essa palavra imediatamente após o período após a uma inicial no código CSS, sem espaço entre elas. Por exemplo, se você quiser chamar a classe "rollinover," o código CSS deve começar com a.rollinover.

Adicionar uma segunda linha de código CSS entre o código que você acabou de entrar e a tag de estilo fechamento. Esta linha irá definir o que acontece quando o visitante passa o cursor sobre a imagem. O código básico para isso é a: hover. {Background-position: 0 -px;}.

Adicionar as informações necessárias para a segunda linha para torná-lo aplicável à sua imagem. Adicione o nome da classe que você definiu imediatamente após o período após pairar sem um espaço, e adicionar o valor de pixel de metade da altura do arquivo de imagem entre o traço eo px. Por exemplo, se você nomeou a classe "rollinover" ea imagem é de 100 pixels de altura, o código ficaria assim: a: ​​hover.rollinover {background-position: 0 -50px;}.

Localizar onde no código que você deseja colocar a sua imagem.

Adicione o código texto onde você quer que sua imagem apareça. Adicione o nome da classe que você definiu no CSS entre as aspas e substituir a palavra "texto" com uma breve descrição da imagem (ou da ligação que irá ser utilizado como, se aplicável).

Adicione o href code ="" entre as primeiras aspas e o colchete de fechamento da abertura de uma tag, com a URL que você deseja que a imagem conectar-se a entre o novo conjunto de aspas, se a imagem é para ser um link.