Mouseover'da bir hayal gücünün bölümlerini nasıl vurgularım?

Question

İçinde yaklaşık 70 alan bulunan bir görüntü haritası görüntülemem gerekiyor. Fare imlecinin şu anki hayal haritasının alanı belli bir renkte vurgulanmalıdır.

Bu mümkün mü ve eğer evet, nasıl?

Answer 1

gerekir yanıt: http://plugins.jquery.com/project/maphilight

Bunu kullanarak, herhangi bir görüntü için bu özelliği uygulamak için birkaç satırlık kod gerekir.

Answer 2

Evet, bu mümkündür. Ben jquery ve görüntü harita alanı mouseenter/mouseleave olayları ile tam bir şey yaptım, ama 70 alanları ile değil. Sadece senin için daha fazla iş olacak. Resimlerin mouseover üzerindeki ajax çağrıları ile yüklenmesini veya bir hareketli grafik ve konumlandırma kullanarak düşünebilmeniz için 70 görüntüyü dom'a yüklemeniz gerekmez.

jQuery:

.map-uçuşu size haritanın üst üzerinde koymak istiyorum tüm görüntüleri olan bir div olduğunu

$(document).ready(function() { 

    $(".map-areas area").mouseenter(function() { 
     var idx = $(".map-areas area").index(this); 
     $(".map-hovers img:eq(" + idx + ")").show(); 
     return false; 
    }).mouseleave(function() { 
     $(".map-hovers img").hide(); 
     return false; 
    }); 

}); 

. Gerekirse bunları konumlandırabilir veya görüntüyü, resim haritasıyla aynı boyutta ancak saydamlıkla yapabilirsiniz.

Ve bazı html takip etmek:

NOT: Harita-gezinen kapsayıcı içindeki img indeksi ile nasıl resim haritası alanı indeks hatları fark ettiniz mi? AYDINLATMA: Görüntü haritası saydam bir gif göstermelidir ve görüntülemek istediğiniz gerçek görüntü için arka plan görüntüsü ayarlanmış olmalıdır. Bu tarayıcılar arası bir şey - tam nedeni hatırlayamıyorum.

<div id="container"> 
     <img src="/images/trans.gif" width="220" height="238" class="map-trans" alt="Map/Carte" usemap="#region-map" /> 
     <div class="map-hovers"> 
      <img src="/images/map/sunset-country.png" alt="Sunset Country" /> 
      <img src="/images/map/north-of-superior.png" alt="North of Superior" /> 
      <img src="/images/map/algomas-country.png" alt="Algoma's Country" /> 
      <img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" /> 
      <img src="/images/map/rainbow-country.png" alt="Rainbow Country" /> 
      <img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" /> 
      <img src="/images/map/muskoka.png" alt="Muskoka" />  
     </div> 
</div> 
    <map name="region-map" id="region-map" class="map-areas"> 
    <area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0" alt="Sunset Country" /> 
    <area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1" alt="North of Superior" /> 
    <area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" /> 
    <area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3" alt="Ontario's Wilderness" /> 
    <area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" /> 
    <area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" /> 
    <area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" /> 
    </map> 

Answer 3

bunu yapmak için serin bir yol varsa bilmiyorum ama, bir blok elemanın arka plan görüntüsü olarak resim çekmek şeffaf resmin ve resim haritası ile kaplamak ve sonra bu şeffaf yerini alabilir . alan vurgulanır resmiyle fareyle üzerine gelindiğinde olaya resim

Bunlara karşın aslında bu söyleyebilirim üretimde onu kullandıktan sonra vurgulanan alanların

70 görüntüleri

Answer 4

ScottE'nin çözümünü kullanmayı denedim, ancak maalesef bu hedef imajı vücut arka planı olarak eklemekti. ,

Eğer harita alanı girdikten sonra göstermek bu görüntüyü harita-gezinen

$(document).ready(function() { 

    $(".map-areas area").mouseenter(function() { 
     var idx = $(".map-areas area").index(this); 
     $(".map-hovers img:eq(" + idx + ")").show(); 
     return false; 
    }); 
    $(".map-hovers img").mouseleave(function() { 
     $(".map-hovers img").hide(); 
     return false; 
    }); 

}); 

Burada anahtar kavram olduğunu:

Çözümümün

jQuery onun çok yakın, ancak uygun görüntüler

kullanır o zaman fare altında aktif katın olur - Sadece o görüntüyü bıraktığınız zaman ne olduğunu anlamak kolaydır.

HTML: (hemen hemen aynı, trans görüntü için gerek)

<div id="container"> 
     <img src="/images/full-map.png" width="220" height="238" class="map-trans" alt="Map/Carte" usemap="#region-map" /> 
     <div class="map-hovers"> 
      <img src="/images/map/sunset-country.png" alt="Sunset Country" /> 
      <img src="/images/map/north-of-superior.png" alt="North of Superior" /> 
      <img src="/images/map/algomas-country.png" alt="Algoma's Country" /> 
      <img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" /> 
      <img src="/images/map/rainbow-country.png" alt="Rainbow Country" /> 
      <img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" /> 
      <img src="/images/map/muskoka.png" alt="Muskoka" />  
     </div> 
</div> 
    <map name="region-map" id="region-map" class="map-areas"> 
    <area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0" alt="Sunset Country" /> 
    <area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1" alt="North of Superior" /> 
    <area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" /> 
    <area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3" alt="Ontario's Wilderness" /> 
    <area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" /> 
    <area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" /> 
    <area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" /> 
    </map>