Como fazer um "Usemap" em uma "Div"

Escrito por marie clay | Traduzido por césar campos
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer um "Usemap" em uma "Div"
O "Usemap" define o mapa de imagem para uma figura específica (Comstock/Comstock/Getty Images)

Ao exibir um site, muitos desenvolvedores usam divisões ou "divs", para posicionar o conteúdo nas páginas. Outro método de exibição muito utilizado em uma divisão é o mapa de imagem que cria áreas de link que podem ser clicadas em cima de uma imagem, permitindo que links sejam integrados em um projeto de página complexa. Usar o mapa de imagem dentro de uma "div" fornece amplo controle sobre a posição, aparência e função dos elementos do site.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

    Crie um mapa de imagem

  1. 1

    Crie um mapa no cabeçalho de HTML usando a marca "<map>". Dê um nome e ID exclusivos para o mapa. Por exemplo, se ele é para um menu de navegação, sua marca de abertura pode aparecer da seguinte forma:

    <nome do mapa= "navegação" id = "navegação">

  2. 2

    Adicione um link mapeado através da criação de uma marca "<area>". Uma área contém link, designação de forma e coordenadas para definir a forma, uma ID para referência de outras partes do site e o texto alternativo para usuários do programa texto-voz. Para criar uma área em forma de um retângulo que é de 100 pixels de largura, 50 pixels de altura e está localizada no canto superior esquerdo da imagem, adicione:

    <area href="http://www.linkedwebsite.com" shape = "rect" coords = "0, 0, 100, 50" id = "link1" alt = "linked website" />

  3. 3

    Adicione cada link mapeado necessário e, em seguida, finalize o mapa adicionando "</map>" após o link final.

    "Usemap" em uma "Div"

  1. 1

    Insira a imagem que você criou para o mapa no interior da divisão, criando uma marca "<img />" entre as marcas "<div>" e "</div>". A barra invertida informa ao navegador que, depois do conteúdo dessa marca, a imagem acabou de ser criada.

  2. 2

    Acrescente um local de origem para a imagem e o texto alternativo para uso com o programa de texto-voz. Por exemplo:

    <img src = "images/imagemaplocation.jpg" alt = "navigation menu image" />

    Isso informa ao site que a imagem está localizada na pasta "imagens" do diretório do site e se chama "imagemaplocation.jpg". Quando um visitante chega ao site usando um aplicativo de texto-voz, ele deve ser capaz de encontrar a imagem pela descrição alternativa de "imagem do menu de navegação".

  3. 3

    Insira o comando "usemap" antes do colchete de fechamento da imagem, certificando-se de que é igual ao nome do mapa que você criou com uma "hashtag", ou seja, uma palavra-chave com este sinal "#" na frente do nome. Por exemplo, para aplicar o mapa do menu de navegação, adicione: usemap = "#navigation"

  4. 4

    Salve o site localmente e carregue o novo conteúdo para o servidor aplicar as alterações on-line.

Dicas & Advertências

  • As áreas do mapa de imagem também podem ser formadas em um círculo com os pontos de definição, sendo o ponto central e o raio ou um polígono com vários pontos de coordenadas para definir a forma.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível