Question

jsFiddle

I’m making a web application for a touchscreen. This means i don’t need a mouse on the screen!

I’m using cursor:none; to hide the cursor in the entire page, but somehow this doesn’t work on an image map area.

each area is made as followed:

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

The cursor does change to a normal pointer when i delete the href="#" but the href is necessary for the validation.

See this Fiddle for an example

Any suggestions?

---

[EDIT] I forgot to mention: i’m restricted to Google Chrome! (HTML5 FileSystem support and some other options i’m using)

---

[EDIT 2]

The Hack: Using a 1×1 pixel with an opacity of 1 that Greger mentioned doesn’t seem to work either
jsFiddle 2

Answer 1

http://jsfiddle.net/BaEks/

Add cursor:none; for area-tags

or:

* {
  cursor: none;
}

[UPDATE]

Use javascript instead of map/area-tags

Example:

$("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!");
        }
        // ....
    }
});

See: http://jsfiddle.net/RadVp/1/