कर्सर Usemap/क्षेत्र मामला सूचक को बदल नहीं

Question

मैं निम्न HTML कोड जो मैं सभी ब्राउज़रों में ठीक से काम करने के लिए नहीं मिल सकता है:

<div id ="right_header">  
     <img id = "usemapsignin" src="/images/sign-in-panel-wo-FB.png" usemap = "#signin"> 
</div>  
     <map name = "signin" > 
      <area shape = "rect" coords = "30,10, 150, 50" target = "_blank" alt = "signin" id="signin" 
        onMouseOver="document.images['usemapsignin'].style.cursor='pointer'" 
      onMouseOut="document.images['usemapsignin'].style.cursor='auto'"/> 
      <area shape = "rect" coords = "0,113, 172, 150" target = "_blank" alt = "restowner" id = "restowner" 
       onclick = "alert('Hello Restaurant Owner!')" /> 
     </map> 

मैं जब पर ले जाया सूचक के लिए कर्सर को बदलने के लिए कोशिश कर रहा हूँ Usemap का एक हिस्सा। लेकिन यह क्रोम/सफारी में काम नहीं कर रहा है।

किसी भी मदद की सराहना की जाएगी।

Answer 1

क्रोम और सफारी नक्शा या क्षेत्र तत्वों का सीएसएस बदलते समर्थन नहीं करते।

<area ... href="javascript:void(0);" /> 

Answer 2

आईई क्षेत्र टैग में कर्सर को बदलने का समर्थन नहीं करता: एक क्षेत्र पर एक mousepointer प्राप्त करने का एकमात्र सरल तरीके से है।

आप क्या करना है जे एस के साथ यह चाल है।

• आप आसानी से ImageMap वे पर स्क्रॉल के आधार पर छवि को बदलने की अनुमति देगा:

  <img id="someimage" scr="images/image.jpg" usemap="#myareamap" /> 
  
  <map name="myareamap"> 
      <area shape="poly" alt="test" title="test" coords="0,0, 50,50, 50,100, 0,100, 0,0" onmouseover="changeimage('someimage', 'newimagesrc')" /> 
  </map> 
  

  इस यह दो काम करने होंगे अपने जावास्क्रिप्ट

  function changeimage(id, imagesrc){ 
      document.getElementById(id).src = imagsrc; 
      if (imagesrc = "images/image.jpg"){ 
       document.getElementById(id).style.cursor = "default"; 
      } else { 
       document.getElementById(id).style.cursor = "pointer"; 
      } 
  } 
  

  में है।

• आप भ्रम है कि केवल areamap से अधिक scolled का हिस्सा कर्सर बदलता है देंगे।

Answer 3

यह आईई, फ़ायरफ़ॉक्स, क्रोम और सफारी पर काम करना चाहिए।

<img id="img_id" src="image.gif" border="0" usemap="#map4" /> 
<map id ="map4" name="map4"> 
    <area shape ="poly" coords="5, 0, 100, 10, 94, 66, 0, 50" 
      href="javascript:void(0);" 
      onmouseover="document.getElementById('img_id').style.cursor='pointer';" 
      onmouseout="document.getElementById('img_id').style.cursor='';"> 
</map> 

Answer 4

मुझे एक समान समस्या थी। समाधान एक सीएसएस हैक करने के बजाय क्षेत्र में href="#" विशेषता जोड़ दिया गया था।

Answer 5

इन समाधानों में से सभी हैक्स कि अच्छी तरह से (मेरे लिए वे बिल्कुल काम नहीं किया था) काम नहीं करते हैं। बहुत गड़बड़ाने के बाद, और अधिक सोचने के बाद मैंने समस्या को निर्धारित किया कि ब्राउजर को यह नहीं पता कि क्षेत्र तत्व को कैसे प्रस्तुत किया जाए, इसलिए इसे स्टाइल नहीं किया जा सकता है। यदि आप HTML5 तत्वों का उपयोग कर रहे हैं तो आपको इस चुनौती से परिचित होना चाहिए। वह तब था जब प्रकाश बल्ब बंद हो गया ..

इसके आसपास पाने के लिए बस क्षेत्र टैग को ब्लॉक स्तर तत्व के रूप में सेट करें। फिर आप इसे आवश्यकतानुसार स्टाइल कर सकते हैं। मेरे लिए बहुत अच्छा काम किया:

area { 
    display: block; 
    cursor: pointer; 
} 

Answer 6

मुझे Jquery का उपयोग करके एक अच्छा समाधान मिला!

$('area').hover(function(){ 
    //Set your cursor to whatever 
    $('body').css('cursor', 'help'); 
}, function() { 
    //set your cursor back to default 
    $('body').css('cursor', 'initial'); 
})