Курсор не меняется на указатель в случае Usemap/area

У меня есть следующий 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>

Я пытаюсь изменить курсор на указатель при перемещении по части карты использования. Но он не работает в Chrome/Safari.

Любая помощь будет оценена.


html area cursor
person nitin    schedule 05.07.2011    source источник

Ответы (6)


arrow_upward
37
arrow_downward

Chrome и Safari не поддерживают изменение CSS элементов карты или области. Единственный простой способ получить указатель мыши на область - это иметь:

<area ... href="javascript:void(0);" />
person Nico Westerdale    schedule 19.08.2011

arrow_upward
22
arrow_downward

Все эти решения — хаки, которые плохо работают (у меня они вообще не работали). После долгих поисков и размышлений я решил, что проблема в том, что браузер просто не знает, как отображать элемент области, поэтому его нельзя стилизовать. Если вы используете элементы HTML5, вы должны быть знакомы с этой задачей. Вот тогда лампочка погасла..

Чтобы обойти это, просто установите тег области как элемент уровня блока. Затем вы можете стилизовать его по мере необходимости. Отлично сработало для меня:

area {
  display: block;
  cursor: pointer;
}
person elDuderino    schedule 16.04.2013
comment
Хорошо, это не будет работать в IE (поймите). Я обновлю свое решение, когда смогу вернуться к нашему старому другу IE. - person elDuderino; 17.04.2013
comment
Хорошо - Webkit отсортирован без JS - iE, кого это больше волнует? - person T4NK3R; 17.06.2013
comment
Для меня казалось, что для Safari, чтобы показать курсор указателя, он действительно нуждался в отображении: блок - person dijipiji; 15.10.2013
comment
Только что попробовал в IE (8), там тоже работает. Также Firefox 23 + chrome 33. Отличное решение. С какой версией IE не работает? - person werner; 19.03.2014
comment
если нет атрибута href и только событие onclick, это не будет работать в IE8 или 10. Это единственные 2, которые я пробовал... - person Mike_K; 15.04.2014
comment
Хорошо работает в Chrome. в IE - вам нужно использовать ответ @Jirapong. я использую твайз - person inon; 09.07.2014
comment
+1 к inon, используйте как этот ответ, так и ответ @Jirapong, чтобы все это охватить. - person Mahn; 24.10.2014
comment
Отлично работает для меня! - person SMBiggs; 16.04.2015

arrow_upward
11
arrow_downward

Это должно работать в IE, Firefox, Chrome и 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>
person Jirapong    schedule 27.08.2012
comment
Хорошо работает в IE. в chrome - вам нужно использовать ответ @elDuderino. я использую твайз - person inon; 09.07.2014
comment
Это должен быть принятый ответ, отлично работает в последней версии Chrome. - person Kira; 08.12.2014
comment
Использование href="#" тоже работает. - person vapcguy; 17.06.2021

arrow_upward
4
arrow_downward

IE не поддерживает изменение курсора в теге области.

Что вам нужно сделать, так это обмануть его с помощью 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>

это в вашем 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";
    }
}

Это сделает две вещи:

  • Позволит вам легко изменить изображение на основе карты изображений, которую они прокручивают.
  • Даст вам иллюзию, что курсор меняется только в той части карты области, над которой вы просматриваете.
person Webmaster    schedule 31.07.2012
comment
но он хочет изменить курсор только в области, а не на всем изображении. - person Jirapong; 27.08.2012
comment
Это лучший ответ для меня. Когда мышь покидает область, курсор больше не является указателем, а при наведении - таковым и является. Это очень простое и умное решение, у меня нет никаких ошибок. - person ivkremer; 10.06.2013

arrow_upward
2
arrow_downward

У меня была аналогичная проблема. Решение заключалось в том, чтобы добавить атрибут href="#" в область вместо взлома CSS.

person aromerooca    schedule 24.09.2012

arrow_upward
1
arrow_downward

Я нашел отличное решение с помощью Jquery!

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