Os mapas de imagens HTML ainda são usados?

113

As pessoas ainda usam os antigos mapas de imagens HTML? Aqueles com:

<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...

Ou existe uma alternativa mais nova e melhor?

html imagemap

— ss888
fonte

1

Quando você perguntar se há algo melhor ou não, você deve fornecer um meio de comparação. Melhor de que maneira ou com que propósito? Existem ferramentas mais poderosas do que mapas de imagens à nossa disposição, mas também mais complexas ...

— Jeff Parker

2

Bom ponto - eu não uso um mapa de imagem há muito tempo e pensei que ele pode ter sido substituído por um método aprimorado de codificação.

— ss888

1

Funcionalidade baseada em Javascript / camada e flash substituíram mapas de imagens em quase tudo que eu encontrei ... Não me lembro da última vez que vi um em serviço ativo. Se você tiver um propósito específico em mente, uma resposta mais específica pode estar mais disponível :)

— Jeff Parker,

21

Eu prefiro evitar o Flash nos dias de hoje lol.

— ss888

4

Se você está procurando algo rápido para fazer, rápido para executar e apenas levemente maligno, os mapas de imagens farão o trabalho. Não existe um substituto amplamente suportado que faça o trabalho na mesma velocidade que penso. Agora, se você teve tempo para SVG, Canvas, e não se importou em excluir o IE da sua lista de navegadores compatíveis ...

— Jeff Parker

53

Sim, as pessoas ainda usam mapas de imagens. Uma alternativa seria posicionar os elementos usando posicionamento absoluto e CSS, mas isso não é necessariamente melhor. Também não permite que você tenha formas como em mapas de imagem

— JohnP
fonte

Ok, então os mapas de imagens html ainda são bons? Que tal adicionar efeitos de flutuação / rolagem?

— ss888

meu maior problema com os mapas de imagens é que, ao contrário das imagens com as quais eles se associam, eles não se adaptam ao navegador ou ao tamanho da tela. Espero que o OP pesquise formatos SVG

— Martin

2

você tem que dimensioná-lo com o tamanho da imagem. Fazendo o tamanho da imagem em relação ao tamanho da janela. em seguida, sempre comparando essa proporção largura / altura com a proporção do mapa de imagem e, em seguida, usando javascript para sobrescrever as coordenadas. O manipulador de eventos de tamanho de imagem baseado em jquery é $ (window) .resize (function () {.... yourcode ...});

— Skidadon

46

Eles estão na especificação HTML5 , portanto, não serão descontinuados.

Você ainda pode usá-los livremente, eles certamente ainda têm seu lugar no desenvolvimento web. Ou eu poderia dizer, existem aquelas raras ocasiões em que você pode resolver algo melhor com um mapa de imagem.

— kapa
fonte

19

Uma solução alternativa para o uso de CSS ou mapas de imagem seria fazer uso de gráficos SVG embutidos no dom HTML.

Um tutorial sobre como obter efeitos de mouseover usando essa técnica é descrito neste tutorial: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

A principal lição é que os elementos SVG também acionam eventos dom tradicionais, incluindo onmouseover e onmouseout .

— Norman H
fonte

1

+1 SVG é a melhor alternativa direta aos mapas de imagens, pois a interação pode ser com qualquer forma arbitrária. Algo muito semelhante a mapas de imagens pode ser criado onde as coordenadas vetoriais cortam imagens de pixel raster, dando aos elementos SVG um preenchimento de imagem . Mas mesmo assim, os mapas de área podem ser melhores em alguns casos (eles são mais simples e não cortam a imagem, o que pode ser desejável às vezes).

— user56reinstatemonica8 02 de

18

Sim, os mapas de imagens html são bons, especialmente se você quiser que sua área seja um polígono. Você também pode adicionar efeitos de rollover ao seu mapa com javascript. Há um bom tutorial e demonstração aqui:

http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484

— LostLin
fonte

8

+1 - Embora você possa fazer muito com CSS e posicionamento absoluto, os mapas de imagem ainda são a única maneira de detectar o foco em uma área poligonal não retangular.

— Blazemonger

10

Os mapas de imagens ainda estão em especificações HTML5, compatíveis com todos os navegadores.

Eles podem ser adaptados para um design responsivo usando mapas de imagens jQuery RWD: https://github.com/stowball/jQuery-rwdImageMaps

Ele detecta e redimensiona automaticamente as coordenadas dos mapas de imagem.

Também está disponível para desenvolvedores Wordpress como plug-in: http://wordpress.org/plugins/responsive-image-maps/

Solução simples e eficaz.

— Daniele B
fonte

9

Sim, ainda uso mapas de imagens, porém meu último projeto usou Raphaël. Foi muito fácil colocar algo em funcionamento.

http://dmitrybaranovskiy.github.io/raphael/

Do site deles:

Raphaël ['ræfeɪəl] usa a recomendação SVG W3C e VML como base para a criação de gráficos. Isso significa que cada objeto gráfico que você cria também é um objeto DOM, portanto, você pode anexar manipuladores de eventos JavaScript ou modificá-los posteriormente. O objetivo de Raphaël é fornecer um adaptador que tornará o desenho de arte vetorial compatível com vários navegadores e fácil.

Bom exemplo de mapa de imagem simples:

http://dmitrybaranovskiy.github.io/raphael/australia.html

— David Newcomb
fonte

2

Não teria demorado muito para você corrigir o link em vez de reclamar e votar :(

— David Newcomb

2

Caro David, Removi o voto negativo. Como você quer que eu conserte o link que simplesmente está quebrado? Eu removeria http://raphaeljs.com/completamente e forneceria apenas o exemplo do Github.

— orschiro

6

O objetivo dos sites de pilha é a colaboração. Se você vir um link quebrado, corrija-o se puder. Não pense nisso em termos de links quebrados, eles são ponteiros quebrados para recursos. Se o recurso foi movido, atualize o link para que aponte para o novo local do recurso: isso é o que importa. Raphaeljs costumava ter seu próprio site, mas obviamente mudou para o GitHub. Mandamos as pessoas de volta ao Google para descobrir onde ele está agora? Ou nós os ajudamos a partir daqui? O exemplo da Austrália é o mesmo exemplo, mas vive em um lugar diferente.

— David Newcomb,

O http://raphaeljs.com/link acabará quebrando quando o registro de domínio expirar, mas agora há um redirecionamento para dar a todos (no mundo) a chance de atualizar seus links. Talvez @orschiro você possa começar com aquele do artigo e adicionar ao esforço colaborativo aqui no SO.

— David Newcomb,

1

Compreendido, obrigado David! Eu atualizei a resposta e consertei o link. :-)

— orschiro

4

Embora eu raramente os veja mais usados em sites modernos, eles parecem ser usados por meus clientes em suas campanhas de e-mail. No entanto, notei e confirmei que existem alguns problemas de escala com o sistema de coordenadas em dispositivos móveis.

** Sei que este tópico é antigo, estava apenas fazendo uma pesquisa adicional sobre isso para um problema recente de campanha por e-mail e pensei que poderia ajudar alguém no futuro.

Edição de terceiros

A pergunta em litmus.com sobre suporte a mapas de imagens é de 04/2014

Os mapas de imagem não suportam tags ALT, quando as imagens não são carregadas, o texto ALT não é exibido em alguns clientes.

O uso do mapa de imagens geralmente resulta no uso de imagens grandes, o que pode causar problemas de entrega e atrapalhar a velocidade de download (especialmente importante para usuários móveis).

E o mais importante, o iOS (iphone / ipad) não dimensiona as coordenadas do link do mapa da imagem quando a imagem é dimensionada, o que quebra os links. Como o iOS representa a grande maioria das aberturas de e-mail (iPhone + iPad = 38% via http://emailclientmarketshare.com/ ), isso é importante.

— fuso 79
fonte

0

Sim, ainda usava

Um mapa de imagem permite que um usuário crie um hiperlink para várias páginas clicando em diferentes partes de uma imagem. Simplesmente, usando o mapa de imagem, criamos listas de coordenadas relacionadas a uma área específica da mesma imagem e fornecemos o hiperlink para um local diferente. Ao usar isso em uma única imagem, fornecemos vários links.

Mais

— Srikrushna
fonte

-2

mapa de imagem é uma opção bastante interessante em html e html5 eles ainda estão sendo usados e eu, pessoalmente, adoro isso, portanto, acho o uso em dispositivos móveis meu problema está relacionado à escala

sim, eu tenho experiência própria, porém, sou um aluno matriculado em html html5 e, para iniciantes, gostaria de seguir o link w3chools

http://www.w3schools.com/html/html_images.asp

você vai ganhar muito com esta [página

— Shoua Iqbal
fonte