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
Respostas:
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
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 ...});
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.
+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:
+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.
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.
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.
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.
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.
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
Respostas:
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
fonte
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.
fonte
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 .
fonte
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
fonte
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.
fonte
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:
Bom exemplo de mapa de imagem simples:
http://dmitrybaranovskiy.github.io/raphael/australia.html
fonte
http://raphaeljs.com/completamente e forneceria apenas o exemplo do Github.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.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
fonte
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
fonte
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
fonte