Usando pairar JQuery com mapa de imagem HTML

Question

Eu tenho uma imagem de fundo complicada com um monte de pequenas regiões que necessitam de capotamento ilustração destaques, juntamente com display de texto adicionais 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 destaque capotamento precisa exibir em uma das camadas de “sanduíche” entre para alcançar o efeito desejado.

Depois de algum mexer mal sucedida com blocos, decidi isso pode ser feito com um mapa de imagem old-school. Eu fiz um mapa de teste esquema com quatro contornos de forma geométrica e “cheio”-los usando com png capotamentos. A idéia é associar o mapa de imagem com a camada de fundo inferior, inicializar todas as sobreposições com css {visibility: hidden} e use o método de foco do jQuery para torná-los visíveis, bem como revelar texto associado em uma div separada. A função de texto separado é por isso que eu não estou tentando isso com o: pseudoclass pairar em vez de jQuery hover. Porque eu estava usando o mapa de imagem, fiz todos os pngs capotamento (que têm fundos transparentes) dimensionada para o recipiente cheio para a colocação exata assim que tudo se alinha com precisão.

O que eu tenho obras ... não realmente! O mapa de imagem é mapeado corretamente para ativar única das áreas geométricas. Mas a href de cada área de rolagem funciona apenas intermitentemente, e usando pairar Jquery com visibilidade css é confuso. comportamento desejado é que rolar para a área simplesmente faria a forma sólida. O que realmente acontece é qualquer movimento dentro da forma torna alternância rápida entre visível e escondido; quando o cursor pára dentro da forma, pode ser visível ou talvez não. Todas as ideias apreciada!

Configuração pairar amostra (I vai finalmente usar matrizes para rollovers reais, links associados e texto):

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

mapa de imagem:

<div id="container">
    <img src="images/testMap_w.png" width="800" height="220" alt="TestMap W" usemap="#testMap">
    <map name="testMap">
        <area shape="polygon" coords="20,20,106,20,106,106,20,106" href="http://www.stackoverflow.com" id="box" />
        <area shape="polygon" coords="216,50,339,50,277,156" href="http://www.google.com" id="triangle" />
        <area shape="polygon" coords="460,0,574,0,460,220" href="http://www.cnn.com" id="bordertriangle" />
        <area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" href="http://slashdot.org" id="pentagon" />
    </map>
    <img src="images/testMap_box.png" width="800" height="220" alt="TestMap Box" id="ID_box">
    <img src="images/testMap_triangle.png" width="800" height="220" alt="TestMap Triangle" id="ID_triangle">
    <img src="images/testMap_border_triangle.png" width="800" height="220" alt="TestMap Border Triangle" id="ID_bordertriangle">
    <img src="images/testMap_pentagon.png" width="800" height="220" alt="TestMap Pentagon" id="ID_pentagon">
</div>

Answer 1

Você deve verificar se 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 a partir dele para o seu reparo.

Answer 2

Esta questão é antiga, mas eu queria acrescentar uma alternativa para a resposta aceita que não existia na época.

Imagem Mapster é um plugin jQuery que eu escrevi para resolver algumas das deficiências do Mapa Hilight (e foi inicialmente uma extensão desse plugin, embora seja desde sido quase totalmente reescrito). Inicialmente, esta foi apenas a capacidade de manter o estado de seleção para áreas, problemas de compatibilidade do navegador de correção. Desde seu lançamento há alguns meses, no entanto, eu adicionei um monte de recursos, incluindo a capacidade de usar uma imagem alternativa como fonte para os destaques.

Ele também tem a capacidade de identificar áreas como "máscaras", ou seja, você pode criar áreas com "buracos", e, adicionalmente, criar agrupamentos complexos de áreas. Por exemplo, uma área poderia causar outra área B a ser destacado, mas a área B em si não iria responder a eventos do mouse.

Há alguns exemplos no site que mostram a maioria dos recursos. A github repositório também tem mais exemplos e documentação completa.

Answer 3

Eu encontrei este script de mapeamento maravilhoso ( mapper.js ) que eu usei no passado . O que é diferente sobre isso é que você pode passar o mouse sobre o mapa ou um link na sua página para fazer o destaque da área do mapa. Infelizmente ele é escrito em JavaScript e requer um monte de in-line de codificação no HTML - Eu adoraria ver esse script portado para o jQuery: P

Além disso, confira todos os demos! Acho este exemplo quase poderia ser feito em um jogo online simples (sem o uso de flash) -. Certifique-se de clicar nos diferentes ângulos de câmera

Answer 4

Embora jQuery Maphilight plugin faz o trabalho, ele conta com a desatualizado detalhado mapa de imagem no seu html. Eu preferiria manter os mapcoordinates externo. Isso poderia ser tão JS com o plugin jQuery imagemap mas falta-lhe pairar estados. Uma boa solução é googles GeoMap visualização em flash e JS. Mas o futuro opensource para este tipo de vectordata, porém, é SVG, considerando suporte a SVG accross todos os navegadores modernos, e googles svgweb para um converter Flash para o IE, por que não um plugin jQuery para adicionar links e hoverstates a um mapa SVG, como o demo JS aqui ? Dessa forma, você também evitar o complexo passo de transformar um vectormap a um coordenadas de mapa de imagens.