Haritadaki bölgeler için çok sayıda poli alanla (her biri 20'nin üzerinde koordinat) çok büyük bir harita oluşturdum. Ancak, görünür bir öğe olmadığı söylendiği gibi AREA etiketine css ekleyemezsiniz. Yapmak istediğim şey, kullanıcı haritadaki bir alanın üzerine geldiğinde, belirli AREA öğesine 1px kenarlık uygulayarak "vurgulanmış" olmasını istiyorum. Bunu yapmanın bir yolu var mı? Hayır, dikdörtgenler kullanarak başvurmayacağım.Css uygulamasına AREA MAP
, SVG çalışıyor kabul var?
Ben bir SVG usta değilim ama burada çırpılmış bir örnek: http://jsfiddle.net/tZKuv/3/. Üretim için, none ile varsayılan darbeyi değiştirmek isteyebilirsiniz, bu yüzden nerede olduğunu görebilirsiniz gray kullanılır.
dezavantajı kolaylığı kullanımı alanı/harita verir kaybedeceğimi yani ama bu yol giderseniz size hedefinize, düşünün. Ben poligon cursor: pointer eklendi ve href<area> ait simüle etmek onclick işleyicileri ekleyebilir.
Açık bir uyarı, tarayıcı desteği. Bu, Chrome'da çalışıyor gibi görünüyor ve IE9'da çalışması gerektiğinden oldukça eminim (jsfiddle şu anda IE9'da çalışmıyor), ancak önceki IE sürümleri SVG'yi desteklemiyor.
Güncelleme: IE9 sınamak için hızlı bir test sayfası yapılmıştır. Gerçekten beklendiği gibi çalışıyor. Here's the source.
Yeniden güncelleyin: Bu, başka bir soruda sorduğunuz yakınlaştırma sorununu da çözer.
Hayır, açıkladığınız olarak bunu yapmanın bir yolu yoktur. Araştırdım ve denedim. Yapabilecekleriniz, çeşitli bölümlerde mouseover olayları oluşturmak ve aynı alanda gölgelenmiş bazı kaplama görüntülerini takas etmektir. Eğer keyfi şekiller kullanabilir ve yine stilleri kullanabilmek istiyorsanız
CSS ile mümkün değil.
Yine de, Map Hilight jQuery eklentisine bakabilirsiniz.
DÜZENLEME 10.2011
ImageMapster da kontrol etmelidir daha yeni ve daha güçlü bir eklenti.
Hey, bu oldukça havalı. –
ImageMapster, SVG ile çalışır mı? –
Diğer sorumu referans göstermeye çalıştığınız için teşekkür ederiz. Hepimiz modern tarayıcılar kullansaydık SVG ideal olurdu. IE6'nın resmi olarak microsoft tarafından desteklenmemesine rağmen, sadece dezavantaj muhtemelen IE7 ve IE6 gibi eski tarayıcılarda bulunan kullanıcıları dışarıda bırakır. – peter
@PeterBZ Muhtemelen baş ağrısına yol açıyor, ancak SVG'yi desteklemeyen tarayıcılar için geri dönüş davranışı ekleyebileceğinizi düşünüyorum (ör. Http://www.kaizou.org/2009/03/inline-svg-fall). Ne kadar geliştirme süresinin ne kadar tamamen tersine çevirdiğini tersine çevirmek için ne kadar kolay bir şekilde tersine çevirdiğini düşünün, sanırım. İyi şanslar! – Sapph
Check out ** raphael.js ** - tüm tarayıcılar IE6 + için SVG. Bildiğim kadarıyla, erken Android telefonlarda stok tarayıcı dışında her şeyi yapar. – user568458