如何隱藏圖像地圖區域上的光標

我正在製作觸摸屏的網絡應用程序。這意味着我不需要在屏幕上的鼠標！

我使用cursor:none;將光標隱藏在整個頁面中，但不知何故，這不適用於圖像映射區域。

每個區域作爲隨後由：

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

光標確實改變到正常的指針，當我刪除href="#"但href是必需的驗證。

爲例

任何建議，請參閱本Fiddle？

[編輯]我忘了提及：我只限於Google Chrome！（HTML5文件系統支持和我使用一些其他的選擇）

[EDIT 2]

的哈克：使用1x1像素與Greger提到似乎沒有任何工作的1的不透明度
jsFiddle 2

來源

2012-10-18 Marcel

什麼t觸摸屏的類型？由於沒有鼠標，因此通常不會顯示光標，因此您不需要執行任何操作。 –

@ net.uk.sweet an [ELO TouchSystems]（http://www.scansource.com/Products%20and%20Promotions/Manufacturer/Family/Product.aspx?pid=ELO-E700641） – Marcel

http://jsfiddle.net/BaEks/

添加光標：無;對於面積標籤

或：

* { 
    cursor: none; 
}

[UPDATE]

使用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-18 14:55:19

這對Firefox的效果非常好！但我只限於谷歌瀏覽器（我忘記提及） – Marcel

好的，請參閱http://icelab.com.au/articles/invisible-cursors-in-google-chrome-with-css/ – 2012-10-18 15:11:32

這是一個非常好的砍！但不幸的是，它不適用於圖像映射:(請參閱更新的[jsfiddle]（http://jsfiddle.net/Sqghz/5/） – Marcel

如何隱藏圖像地圖區域上的光標

回答

相關問題