Tenho uma imagem de plano de fundo complicada, com muitas regiões pequenas que precisam de destaque para ilustração de sobreposição, além de exibição de texto adicional e links associados para cada uma. A ilustração final empilha várias imagens estáticas com transparência usando o índice z, e as ilustrações de rolagem de destaque precisam ser exibidas em uma das camadas intermediárias para obter o efeito desejad

Depois de algumas tentativas malsucedidas de 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 formas geométricas e os "preenchi" usando com sobreposições png. A idéia é associar o mapa da imagem à camada de fundo inferior, inicializar todos os rollovers com css {visible: hidden} e usar o método de pairar do Jquery para torná-los visíveis e revelar o texto associado em uma div separada. A função de texto separado é o motivo pelo qual não estou tentando fazer isso com o pseudoclasse: hover em vez do jQuery hover. Como eu estava usando o mapa da imagem, criei todos os pngs de sobreposição (que têm fundos transparentes) dimensionados para o contêiner completo para o posicionamento exato, para que tudo fique alinhado com precisã

O que eu consegui funciona ... na verdade não! O mapa da imagem está corretamente mapeado para ativar apenas as áreas geométricas. Mas o href de cada área de rollover funciona apenas de forma intermitente, e o uso do Jquery hover com visibilidade de css é uma bagunça. O comportamento desejado é que rolar para a área simplesmente tornaria a forma sólida. O que realmente acontece é que qualquer movimento dentro da forma alterna rapidamente entre visível e oculto; quando o cursor para dentro da forma, pode estar visível ou não. Alguma idéia apreciada!

semple hover setup (finalmente utilizarei matrizes para sobreposições reais, links e texto associados):

$('#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>