मैं माउसओवर पर छविमैप के कुछ हिस्सों को कैसे हाइलाइट करूं?

Question

मुझे इसमें लगभग 70 क्षेत्रों के साथ एक छविमैप प्रदर्शित करने की आवश्यकता है। वर्तमान में माउस कर्सर छविमैप का क्षेत्र निश्चित रंग में हाइलाइट किया जाना चाहिए।

क्या यह संभव है और यदि हां, तो कैसे?

Answer 1

की आवश्यकता होगी वास्तव में उत्पादन में इसका उपयोग करने मैं यह कहना चाहता हूँ के बाद जवाब है: http://plugins.jquery.com/project/maphilight

इसका उपयोग किसी भी छविमैप के लिए उस सुविधा को लागू करने के लिए कोड की कुछ पंक्तियां लेता है।

Answer 2

हां, यह संभव है। मैंने jquery और छवि मानचित्र क्षेत्र माउसेंटर/माउसलेव घटनाओं के साथ सटीक चीज़ की है, लेकिन 70 क्षेत्रों के साथ नहीं। यह आपके लिए और अधिक काम करेगा। आप माउसओवर पर AJAX कॉल के माध्यम से छवियों को लोड करने, या स्प्राइट और पोजिशनिंग का उपयोग करने पर विचार कर सकते हैं ताकि आपको डोम में 70 छवियों को लोड करने की आवश्यकता न हो।

jQuery:

$(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; 
    }); 

}); 

कहाँ .map-होवर एक div सभी छवियों है कि आप अपने मानचित्र के शीर्ष पर रखना चाहता हूँ किया है। यदि आवश्यक हो तो आप उन्हें स्थिति दे सकते हैं, या छवि को छवि मानचित्र के समान आकार बना सकते हैं, लेकिन पारदर्शिता के साथ।

और कुछ html पालन करने के लिए:

नोट: गौर करें कि छवि मानचित्र क्षेत्र सूचकांक लाइनें img सूचकांक के साथ नक्शा-घूमता कंटेनर के भीतर? ALSO: छवि मानचित्र को एक पारदर्शी gif पर इंगित करना चाहिए, और पृष्ठभूमि छवि को उस वास्तविक छवि पर सेट करना चाहिए जिसे आप प्रदर्शित करना चाहते हैं। यह एक क्रॉस-ब्राउज़र चीज है - सटीक कारण याद नहीं कर सकता है।

<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

मैं हो, तो यह करने के लिए एक अच्छा तरीका पता नहीं है, लेकिन आप एक ब्लॉक तत्व की पृष्ठभूमि छवि के रूप अपनी तस्वीर ले सकता है, एक पारदर्शी चित्र और अपनी छवि नक्शे के साथ यह उपरिशायी और फिर इस पारदर्शी की जगह । इसका नकारात्मक पक्ष एक तस्वीर क्षेत्र में हाइलाइट किया गया है के साथ माउसओवर घटना पर चित्र

आप पर प्रकाश डाला क्षेत्रों

के 70 छवियों

Answer 4

मैंने स्कॉटई के समाधान का उपयोग करने की कोशिश की लेकिन दुर्भाग्य से इसका उद्देश्य शरीर की पृष्ठभूमि के रूप में लक्षित छवि को जोड़ना था। ,

$(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; 
    }); 

}); 

यहाँ मुख्य अवधारणा है कि एक बार आप नक्शे क्षेत्र में प्रवेश, आप मानचित्र-घूमता छवि:

मेरे समाधान बहुत उसकी के करीब है, लेकिन उचित छवियों

का उपयोग करता

jQuery जो तब माउस के नीचे आपकी सक्रिय परत बन जाती है - बस उस छवि को छोड़ते समय पता लगाना कि चिकनी है।

HTML: (लगभग एक ही, ट्रांस छवि के लिए कोई ज़रूरत नहीं)

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