Como associar um elemento <img> a um elemento <map> para criar um mapa de imagem?

Alternativa D

A associação entre uma imagem e seu mapa clicável em HTML é feita através do atributo usemap.

Explicação Didática

Para criar um mapa de imagem (Image Map) funcional, são necessários dois passos principais na estruturação do código:

1. Definir o Mapa: Utiliza-se a tag <map> com um atributo name (ou id) que identifica o mapa.
2. Vincular à Imagem: Na tag <img>, utiliza-se o atributo usemap cujo valor deve começar com um símbolo # seguido exatamente pelo nome definido no mapa.

Exemplo Prático

<!-- Define o mapa -->
<map name="meuMapa">
  <area shape="rect" coords="0,0,80,80" href="pagina1.html">
</map>

<!-- Associa a imagem ao mapa -->
<img src="imagem.jpg" usemap="#meuMapa" alt="Imagem com áreas clicáveis">

Análise das Alternativas

• Opção 1 (Incorreta): O atributo src define o caminho do arquivo da imagem, não a referência ao mapa.
• Opção 2 (Incorreta): O elemento <img> não pode ser inserido dentro de <map>. Eles são elementos irmãos ou estruturalmente separados.
• Opção 3 (Incorreta): O atributo href é utilizado dentro dos elementos <area> para definir o link de destino, não para vincular a imagem ao mapa.
• Opção 4 (Correta): Descreve corretamente o uso do atributo usemap para fazer a referência ao nome do mapa definido anteriormente.

Portanto, a alternativa correta é a D, pois descreve a sintaxe padrão do HTML5 para ativação de mapas de imagem.