Her biri için aktarma resimde vurgular gereken metin görüntülemek ve ilgili bağlantılar ek ile birlikte küçük bölgelerde çok karmaşık bir arka plan görüntüsü var. Şeffaflık z-dizini, vurgu ve aktarma çizimler kullanarak bazı statik görüntülerin birinde görüntülemek için gereken son resimde yığınları arasında “sandviç” istenen etkiyi elde etmek için katmanları.

Blokları ile bazı başarısız işe yaramaz sonra, bu eski bir resim göster ile yapılabilir karar verdim. Dört geometrik şeklin anahatları ile test şematik bir harita yaptım ve” png, takla kullanma. “dolu Fikir için ortak resim göster ile alt arka plan katmanı başlatılamıyor tüm hesabı ile css {görünürlük: gizli} ve kullanımı Jquery hover metodu için onları görünür olarak ortaya ilişkili metin içinde ayrı bir div. Ayrı bir metin işlevi :jQuery hover yerine getirin pseudoclass ile çalışıyorum. Resim göster kullanıyordum çünkü, aktarma PNG şeffaf arka var olan her şey tam da çizgiler çok kesin yerleştirme için tam konteyner ölçekli tüm yaptım.

Bende çalışıyor... gerçekten değil! Resim göster doğru yalnızca geometrik alanları etkinleştirmek için eşleştirilir. Ama her aktarma alanından href yalnızca zaman zaman çalışır, ve css görünürlük ile Jquery hover kullanarak berbat. İstenen davranış alanına rolling yalnızca şekli katı olacaktı. Aslında ne şekil görünür ve gizli arasında hızlı geçiş yapar içinde herhangi bir hareket; imleci şeklin içinde durduğunda, görünür olabilir ya da olmayabilir. Herhangi bir fikir takdir!

örnek kurulum (sonuçta gerçek, takla, ilgili bağlantılar ve metin diziler için kullanacağım) vurgulu:

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

resim göster:

<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>

Bu eklenti kontrol etmelisiniz:

https://github.com/kemayo/maphilight

demo:

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

eğer bir şey, senin düzeltmek için bazı kod ödünç almak mümkün olabilir.