1

Quero colocar borda ou outline no mapa da imagem no HTML. Tentei usar:

map area{outline: 1} 

Mas não funcionou!

1
  • coloque o seu código na pergunta, para facilitar a visualização do problema Commented 6/10/2018 às 16:24

1 Resposta 1

2

Segunda o W3C:

The area element represents either a hyperlink with some text and a corresponding area on an image map, or a dead area on an image map.

Traduzindo "O elemento de area representa um hiperlink com algum texto e uma área correspondente em um image map ou uma área morta em um image map"

Fonte: https://www.w3.org/TR/2012/WD-html-markup-20120315/area.html

Isso significa que a area é representada dentro do map através das coordenadas. Teoricamente essa área não é renderizada visualmente, ela é um hiperlink referenciado dentro do um map que por sua vez é "indexado" como um mapa de áreas ativas sobre uma imagem.

Veja que vc pode trocar a cor da pseudo-class :link, porém isso muito provavelmente é por uma questão de acessibilidade do user-agent. Veja como esse elemento é renderizado pelo Browser:

map area:link {
  outline: red auto 5px !important;
}

inserir a descrição da imagem aqui

Mas repare que por default a area tem display:none

https://www.w3.org/TR/2012/WD-html-markup-20120315/area.html#area-display


Soluções para o seu caso

Usar algum plugin tipo o Mapper.js

http://www.netzgesta.de/mapper/

Ou então vc pode construir um mapa responsivo sobre uma imagem como nesse exemplo

Execute o Snippet abaixo, e depois clica em "Página toda" vc vai ver o @media funcionando, o .container com a imagem vai aumentar, mas não vai perder a referencia do mapa.

Aqui tem uma ferramente para te ajudar a encontrar as porcentagens para posicionar os links sob a imagem. https://www.zaneray.com/responsive-image-map/

OBS: Dentro do Snippet links não funcionam, mas quando vc copiar para a sua página vai funcionar normal.

(Essa técnica não se aplica caso vc use a largura do .container em %, ai não da certo)

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
}
.container {
    position: relative;
    margin: auto;
    width: 400px;
    height: 400px;
    background-image: url(http://placecage.com/400/400);
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
}
.container a {
    background-color: rgba(255, 0, 0, .5);
}
.container a + a {
    border-radius: 50%;
    background-color: rgba(0, 255, 0, .5);
    transform: rotate(-12deg);
}
@media only screen and (max-width: 768px) {
    .container {
        width: 200px;
        height: 200px;
    }
}
<div class="container">
    <a href="https://www.google.com.br/" target="_black" title="Link 1" style="position: absolute; left: 42.25%; top: 26.25%; width: 10.25%; height: 7.25%; z-index: 2;"></a>
    <a href="https://www.globo.com/" target="_black" title="Link 2" style="position: absolute; left: 59%; top: 23.5%; width: 10.5%; height: 6.75%; z-index: 2;"></a>
</div>

5
  • 1
    Obrigado, nota 10 ! Commented 8/10/2018 às 5:40
  • Valeu @LuisFelipe tmj
    – hugocsl
    Commented 8/10/2018 às 9:48
  • @hugocsl dessa maneira feita, caso eu queira que apareça o ".container a" apenas ao passar ao mouse, qual seria a melhor maneira?
    – JVEUZEBIO
    Commented 5/04/2019 às 13:56
  • 1
    @JVEUZEBIO primeiro coloca .container a {opacity:0} e depois .container a:hover {opacity:1} isso deve resolver
    – hugocsl
    Commented 5/04/2019 às 14:07
  • @hugocsl valeu!
    – JVEUZEBIO
    Commented 5/04/2019 às 14:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .