web-dev-qa-db-ja.com

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>

Usemapの一部に移動したときに、カーソルをポインタに変更しようとしています。しかし、Chrome/Safariでは機能しません。

どんな助けでもありがたいです。

htmlcursorarea
21
nitin

ChromeとSafariは、マップまたはエリア要素のCSSの変更をサポートしていません。エリア上でマウスポインタを取得する唯一の簡単な方法は、次のことです。

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

これらのソリューションはすべて、うまく機能しないハックです（私にとってはまったく機能しませんでした）。よく調べて、さらに熟考した結果、ブラウザがarea要素のレンダリング方法を知らないため、スタイルを設定できないという問題があると判断しました。 HTML5要素を使用している場合は、この課題に精通している必要があります。電球が消えたのはその時です。

これを回避するには、areaタグをブロックレベルの要素に設定するだけです。次に、必要に応じてスタイルを設定できます。私にとってはうまくいきました：

area {
  display: block;
  cursor: pointer;
}
21
elDuderino

これは、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>
10
Jirapong

IEは、areaタグのカーソルの変更をサポートしていません。

あなたがしなければならないのは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";
    }
}

これは2つのことを行います：

  • スクロールしたイメージマップに基づいて、画像を簡単に変更できます。
  • エリアマップの一部だけがカーソルを変更するような錯覚を与えます。
4
Webmaster

同様の問題がありました。解決策は、CSSハックを行う代わりに、属性href="#"を領域に追加することでした。

2
aromerooca

Jqueryを使用して素晴らしい解決策を見つけました！

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