Kursor nie zmienia się wskaźnik w przypadku Usemap/obszar

Question

Mam następujący kod HTML, który nie mogę dostać się do pracy rację we wszystkich przeglądarkach:

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

Próbuję zmienić kursor do wskaźnika kiedy podeszła część mapy użytkowania. Ale nie działa w przeglądarce Chrome/Safari.

Każda pomoc zostanie doceniona.

Answer 1

Chrome i Safari nie obsługują zmiany CSS elementów mapy lub obszaru. Jedynym prostym sposobem uzyskania wskaźnika myszy na danym obszarze jest:

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

Answer 2

IE nie obsługuje zmiany kursora w znaczniku obszaru.

To, co musisz zrobić, to oszukać ją za pomocą 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> 

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

Będzie to zrobić dwie rzeczy:

• pozwoli Ci łatwo zmienić obraz na podstawie imagemap one Przewiń.
• Daje ci złudzenie, że tylko część areamap scolled zmienia kursor.

Answer 3

To powinno działać na IE, Firefox, Chrome i 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

Miałem podobny problem. Rozwiązaniem było dodanie atrybutu href="#" do obszaru zamiast wykonywania haka CSS.

Answer 5

Wszystkie te rozwiązania to hacki, które nie działają dobrze (u mnie w ogóle nie działały). Po wielu gogliach i zastanawiam się, czy nie, problem polega na tym, że przeglądarka po prostu nie wie, jak wyrenderować element obszaru, dlatego nie może być stylizowany. Jeśli używasz elementów HTML5, powinieneś znać to wyzwanie. Wtedy właśnie zgasła żarówka ..

Aby obejść ten problem, wystarczy ustawić znacznik obszaru jako element blokowy. Następnie możesz nadać mu styl według potrzeb. Sprawdziło się dla mnie:

area { 
    display: block; 
    cursor: pointer; 
} 

Answer 6

Znalazłem świetne rozwiązanie przy użyciu Jquery!

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