Cursor không thay đổi để con trỏ trong trường hợp usemap/khu vực

Question

Tôi có đoạn code HTML sau mà tôi không thể bắt đầu làm việc hoàn toàn đúng trong tất cả các trình duyệt:

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

Tôi cố gắng để thay đổi con trỏ đến con trỏ khi di chuyển trên một phần của bản đồ. Nhưng nó không hoạt động trong Chrome/Safari.

Mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Chrome và Safari không hỗ trợ thay đổi CSS của phần tử bản đồ hoặc khu vực. Cách đơn giản nhất để có con trỏ chuột trên một khu vực là:

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

Answer 2

IE không hỗ trợ thay đổi con trỏ trong thẻ khu vực.

Điều bạn phải làm là lừa nó bằng JS.

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

này là trong javascript

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"; 
    } 
} 

của bạn này sẽ làm hai việc:

• sẽ cho phép bạn dễ dàng thay đổi hình ảnh dựa trên Imagemap họ di chuyển qua.
• Sẽ cung cấp cho bạn ảo giác rằng chỉ một phần của sơ đồ khu vực được đánh dấu trên thay đổi con trỏ.

Answer 3

Điều này sẽ hoạt động trên IE, Firefox, Chrome và Safari.

<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

Tôi gặp sự cố tương tự. Giải pháp đã thêm thuộc tính href="#" vào khu vực thay vì thực hiện tấn công CSS.

Answer 5

Tất cả các giải pháp này đều là các lỗi không hoạt động tốt (đối với tôi, chúng không hoạt động). Sau nhiều goggling, và nhiều hơn nữa cân nhắc tôi xác định vấn đề là trình duyệt chỉ không biết làm thế nào để render phần tử khu vực, do đó nó không thể được tạo kiểu. Nếu bạn đang sử dụng các phần tử HTML5, bạn nên làm quen với thử thách này. Đó là khi bóng đèn tắt ..

Để giải quyết vấn đề này, bạn chỉ cần đặt thẻ khu vực thành phần tử cấp khối. Sau đó, bạn có thể tạo kiểu cho nó khi cần. Làm việc tuyệt vời cho tôi:

area { 
    display: block; 
    cursor: pointer; 
} 

Answer 6

Tôi đã tìm thấy một giải pháp tuyệt vời khi sử dụng Jquery!

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