Usando o JQuery em foco com o mapa de imagem HTML

Eu tenho uma imagem de fundo complicada com muitas regiões pequenas que precisam de realces de ilustração de rollover, juntamente com exibição de texto adicional e links associados para cada um. A ilustração final empilha várias imagens estáticas com transparência usando z-index, e as ilustrações de sobreposição de destaque precisam ser exibidas em uma das camadas intermediárias “sanduíche” para obter o efeito desejado.

Depois de algumas tentativas mal sucedidas com blocos, decidi que isso poderia ser feito com um mapa de imagens da velha escola. Fiz um mapa de teste esquemático com quatro contornos de forma geométrica e “enchi”-os usando com sobreposições de png. A idéia é associar o mapa de imagem com a camada de fundo inferior, inicializar todos os rollovers com css {visibility: hidden} e usar o método hover do Jquery para torná-los visíveis, bem como revelar o texto associado em um div separado. A function de texto separada é por que eu não estou tentando isso com o pseudoclass: hover em vez de jQuery hover. Como eu estava usando o mapa de imagens, fiz todos os pngs de rollover (que têm planos de fundo transparentes) dimensionados para o contêiner completo para o posicionamento exato, para que tudo fique precisamente alinhado.

O que eu tenho funciona … não é verdade! O mapa da imagem é mapeado corretamente para ativar somente as áreas geométricas. Mas o href de cada área de rollover funciona apenas de forma intermitente, e usar o jQuery pairado com visibilidade css é confuso. O comportamento desejado é que a rolagem na área simplesmente torne a forma sólida. O que realmente acontece é que qualquer movimento dentro da forma faz comutação rápida entre visível e oculto; quando o cursor pára dentro da forma, pode estar visível ou não. Qualquer ideia apreciada!

configuração de hover de amostra (em última análise, utilizarei matrizes para sobreposições reais, links associados e texto):

$('#triangle').hover( function() { $('#ID_triangle').css({'visibility' : 'visible'}); }, function() { $('#ID_triangle').css({'visibility' : 'hidden'}); } ) 

mapa de imagem:

 
TestMap W TestMap Box TestMap Triangle TestMap Border Triangle TestMap Pentagon

Você deve verificar este plugin:

https://github.com/kemayo/maphilight

e a demo:

http://davidlynch.org/js/maphilight/docs/demo_usa.html

se alguma coisa, você pode ser capaz de emprestar algum código para consertar o seu.

Essa pergunta é antiga, mas eu queria adicionar uma alternativa à resposta aceita que não existia na época.

O Image Mapster é um plugin do jQuery que eu escrevi para resolver algumas das deficiências do Map Hilight (e foi inicialmente uma extensão desse plugin, embora ele tenha sido quase totalmente reescrito). Inicialmente, isso era apenas a capacidade de manter o estado de seleção para áreas, corrigir problemas de compatibilidade do navegador. Desde o seu lançamento inicial há alguns meses, porém, adicionei muitos resources, incluindo a capacidade de usar uma imagem alternativa como fonte para os realces.

Ele também tem a capacidade de identificar áreas como “máscaras”, o que significa que você pode criar áreas com “buracos” e, além disso, criar agrupamentos complexos de áreas. Por exemplo, a área A poderia fazer com que outra área B fosse destacada, mas a área B não responderia aos events do mouse.

Existem alguns exemplos no site que mostram a maioria dos resources. O repository do github também tem mais exemplos e documentação completa.

Eu encontrei este maravilhoso script de mapeamento ( mapper.js ) que eu usei no passado. O que é diferente é que você pode passar o mouse sobre o mapa ou um link na sua página para destacar a área do mapa. Infelizmente está escrito em javascript e requer muita codificação em linha no HTML – Eu adoraria ver esse script sendo transferido para jQuery: P

Além disso, confira todas as demos! Eu acho que este exemplo pode ser feito em um simples jogo online (sem usar flash) – certifique-se de clicar nos diferentes ângulos da câmera.

Embora o plugin jQuery Maphilight faça o trabalho, ele se baseia no imagemap detalhado e desatualizado do seu html. Eu preferiria manter as coordenadas do mapa externas. Isso pode ser como JS com o plugin imagemap jquery, mas não possui estados de foco. Uma boa solução é a visualização do geomap no googles em flash e JS. Mas o futuro do opensource para este tipo de vectordata é o svg, considerando o suporte svg em todos os navegadores modernos, e o googles svgweb para um flash convert para IE, porque não um plugin jquery para adicionar links e hoverstates a um mapa svg, como o demo JS aqui ? Dessa forma, você também evita a etapa complexa de transformar um mapa vetorial em coordenadas de um mapa de imagem.