mapas de imagem CSS permitem que os desenvolvedores colocar pontos quentes dentro de imagens que contêm links para outras páginas da web. Por exemplo, um ponto de acesso pode ser colocado ao redor do rosto de uma pessoa na imagem que contém um link para a sua página web pessoal. Quando um usuário coloca o mouse sobre o rosto da pessoa a forma aparecerá que delineia a área hot spot. Criando um mapa de imagem CSS envolve chamar uma imagem em html e depois configurar os códigos CSS correspondentes entre as marcas html. Este artigo demonstra como fazer um mapa de imagem dos olhos e nariz em um retrato Ginevra de Benci pintado por Leonardo da Vinci. Coisas que você precisa
editor de texto , como o Notepad , Emacs, ConTextMozilla , Explorer ou outro navegador
Show Mais instruções
Mapeamento It Out
1

Criar dois páginas ligadas . Isto cria um exemplo para os olhos e um para o nariz . A página olhos vão ler " Estes são os olhos " ea página nariz vai ler "Este é o nariz. " O html exemplo abaixo cria a dois são os olhos !
2

Criar as tags de html para a imagem. Abra um documento em branco e use o seguinte código para chamar a imagem do diretório. Você vai ter que mudar o nome e as especificações de tamanho de sua imagem: e do documento html : imagem type="text/css"> # claro, suas especificações irão variar conforme a sua imagem será diferente. Um software de design gráfico como Coral Draw ou Adobe Photoshop pode fornecer informações sobre a posição pixel. No entanto , você sempre pode encontrar a posição correta por tentativa e erro também. Salve a página no mesmo diretório que os outros dois arquivos .
6

Teste o mapa de imagem. Vá para o diretório onde os arquivos serão salvos e clique duas vezes no arquivo html , onde a imagem aparece . Você deverá ver a sua imagem no navegador. Execute o mouse onde os hotspots foram colocados . Você vai ver uma moldura preta aparecer. Clique dentro do quadro e as páginas de referência será aberta.