2

jsFiddle

タッチスクリーン用のWebアプリケーションを作成しています。これは、画面上にマウスが必要ないことを意味します。

ページ全体でカーソルを非表示にするために使用cursor:none;していますが、どういうわけかこれは画像マップ領域では機能しません。

各エリアは次のように作成されます。 

<area shape="rect" onclick="buttonPressed_DigitalKeyboard('Q');" coords="14,13,94,93" alt="" href="#">

削除するとカーソルは通常のポインタに変わりますがhref="#"、検証にはhrefが必要です。

例については、このフィドルを参照してください

助言がありますか？

[編集]私は言及するのを忘れました：私はグーグルクロームに制限されています！（HTML5ファイルシステムのサポートと私が使用している他のいくつかのオプション）

[編集2]

ハック：グレガーが言及した不透明度1の1x1ピクセルを使用しても、 jsFiddle2は機能しないようです。

4

1 に答える 1

3

http://jsfiddle.net/BaEks/

カーソルを追加：なし; エリアタグ用

また：

* {
  cursor: none;
}

[アップデート]

map/area-tagsの代わりにjavascriptを使用する

例：

$("img#appkeyboard").click(function(e) {
    var off = $(this).offset();
    var cx = e.clientX - off.left;
    var cy = e.clientY - off.top;
    if (cy > 17 && cy < 99) { // 1 row
        if (cx > 17 && cx < 99) {
            alert("button Q is pressed!");
        } else if (cx > 56 && cx < 202) {
            alert("button W is pressed!");
        }
        // ....
    } else if (cy > 114 && cy < 195) { // 2 row
        if (cx > 52 && cx < 135) {
            alert("button A is pressed!");
        } else if (cx > 155 && cx < 237) {
            alert("button S is pressed!");
        }
        // ....
    } else if (cy > 211 && cy < 291) { // 3 row
        if (cx > 90 && cx < 170) {
            alert("button Z is pressed!");
        }
        // ....
    }
});

参照： http： //jsfiddle.net/RadVp/1/

于 2012-10-18T14:55:19.613 に答える