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 1x1 pixel with an opacity of 1 that Greger mentioned doesn't seem to work either
jsFiddle 2
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!");
}
// ....
}
});