Como construir mapas de imagem em html5
páginas da web costumam usar imagens para navegação. Eles são mais bonita do que as ligações de texto simples, e você pode adicionar forma e função em sua página com um elemento. Quando você usa um
Conteúdo
Video: Curso de HTML5 - 27 - IFRAME em HTML5
Para criar um mapa de imagem, você precisa de duas coisas:
Uma imagem com áreas distintas óbvias para usuários
Por exemplo, uma imagem de um parque pode mostrar um parque infantil, uma área de piquenique e uma área de lagoa.
remarcação para mapear as diferentes regiões no mapa para URLs diferentes
Elementos e atributos
Use o elemento para adicionar a imagem do mapa em sua página, assim como faria com qualquer outra imagem. Além disso, incluem o usemap atribuir a deixar o navegador sabe que a informação mapa de imagem deve ir com essa imagem. O valor do usemap atributo é o nome do seu mapa.
Você usa dois elementos e uma coleção de atributos para definir o mapa de imagem:
mapa detém as informações do mapa. o mapa utiliza o elemento nome atributo para identificar o mapa. O valor de nome deve corresponder ao valor de usemap no
elemento que se passa com o mapa.
área liga partes específicas do mapa para URLs. o área elemento leva esses atributos para definir as especificidades de cada seção do mapa:
Video: Mapa Interativo e Animado em SVG - Parte 1
formaEspecifica a forma da região (um ponto quente clicável que faz com que a imagem do mapa de trabalho). Você pode escolher entre rect (retângulo), círculo, e poli (Um triângulo ou poligonal).
Video: VIDEO AULA COMO FAZER MAPA DE IMAGEM COM LINKS
coords: Define as coordenadas da região.
coordenadas de um retângulo incluem a esquerda, direita, superior e pontos de fundo.
coordenadas de um círculo incluem as coordenadas x e y para o centro do círculo, bem como o raio do círculo.
coordenadas de um polígono são um conjunto de coordenadas x e y para cada vértice no polígono.
Para determinar as coordenadas de imagem, você pode usar um editor de mapas de imagem, como Mapedit ou um editor gráfico, como o PaintShop Pro Photo. Mapedit também registra essas coordenadas para você.
Video: Curso de HTML / HTML5: Aula 8 - Link em imagens
href: Especifica o URL para o qual as ligações região (pode ser absoluta ou relativa).
alt: Fornece texto alternativo para a região da imagem.
remarcação
O seguinte define um mapa de três região chamada NavMap vinculado ao arquivo gráfico chamado images / 09fg08-navmap.jpg:
A figura mostra como um navegador exibe esta marcação.
Quando o mouse fica sobre uma região no mapa, o cursor se transforma em uma mão apontando (assim como ela muda ao longo qualquer outro hyperlink). Então, aproveite o texto do título para incluir informações úteis sobre o link e fazer o mapa mais acessível para os deficientes visuais.
Um uso comum para mapas de imagem é transformar mapas de locais (estados, países e tal) em mapas podem ser ligadas. Aqui estão alguns recursos online que você pode usar:
o About.com mapa de imagem tutorial fornece mais detalhes sobre a construção de mapas de imagem com a mão.
HTMLGoodies tem uma grande coleção de tutoriais mapa de imagem e informação.
Criar mapas de imagem à mão pode ser complicado. Use um editor de imagem para identificar cada ponto em seu mapa e então criar a marcação adequada para ele. A maioria das ferramentas HTML incluem utilitários para ajudar você a fazer mapas de imagem. Se você tirar proveito de tal ferramenta, você pode criar mapas de imagem rapidamente e com poucos erros.
Tenha cuidado ao usar mapas de imagem. Se você está criando uma ajuda visual (algo como um mapa com links para diferentes países nela mostrado, por exemplo), usando um mapa de imagem faz todo o sentido. Por outro lado, você nunca deve usar um gráfico com mapas de imagem para sua navegação principal. (Bem, você poderia, mas você não gostar dos resultados!)
Sempre usar HTML e CSS para o principal de navegação do site, ou se você deve usar um mapa de imagem gráfica, incluir uma alternativa baseada em texto junto com esse mapa para que os visitantes do site com deficiência visual também pode navegar usando os controles alternativos vez.
Em geral, a melhor coisa para a navegação é usar texto para rótulos de botão e deixar CSS lidar com o trabalho envolvido em fazer botões com bom aspecto.