Ways to conceal the cursor on an image map hotspot

Question

Ways to conceal the cursor on an image map hotspot

I am developing a web application specifically for touchscreen devices, which eliminates the need for a mouse on the screen.

To hide the cursor throughout the entire page, I am using cursor:none;. However, this method does not work on an image map area.

Each area is created as follows:

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

The cursor reverts to a normal pointer when I remove the href="#", but the href attribute is required for validation purposes.

You can view an example of the issue in this Fiddle

Do you have any suggestions?

[EDIT] Please note that I am limited to working with Google Chrome due to HTML5 FileSystem support and other necessary features.

[EDIT 2]

The workaround mentioned by Greger, using a 1x1 pixel with an opacity of 1, also did not resolve the issue
View updated version on jsFiddle

css html cursor imagemap area

Answer 1

Answer №1

Here is the jsfiddle link

To remove cursor for area-tags, you can use:

* {
  cursor: none;
}

[UPDATE]

It is recommended to use javascript instead of map/area-tags. Here's an 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!");
        }
        // ....
    }
});

Check out this example on jsfiddle: here

Answer 2

Here is the jsfiddle link

To remove cursor for area-tags, you can use:

* {
  cursor: none;
}

[UPDATE]

It is recommended to use javascript instead of map/area-tags. Here's an 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!");
        }
        // ....
    }
});

Check out this example on jsfiddle: here

Ways to conceal the cursor on an image map hotspot

Answer №1

Similar questions

Is the .includes() method executed in a change detection loop even when the related variable remains constant? / Considerations for replacing .includes()

The Android browser is failing to load a Jquery Mobile page using XHTML

Is there a way to create a function in JavaScript that can iterate through all node elements within a node collection?

Error: Label out of place in Material-UI Select

CSS not being applied properly in Devise(Rails) emails when sent to Gmail addresses

A guide on making interactive circular SVG image displays

What's the best way to group rows in an angular mat-table?

What is the best way to extract a CSS rule using PHP?

How to Resize Images in Internet Explorer and Firefox Using CSS

Is it possible to create a popup without using JavaScript?

What is the process for using jQuery to systematically alter the src attribute of all avatar images on Twitter.com?

What is the best way to find the Selenium Webdriver element for the following HTML/jQuery snippet?

The data entry is not displaying on my mobile app

Ways to update CSS using alternate classes without relying on !important

Using CSS or JavaScript to create dynamic animations on a web page

Combine variables within an attribute of an Angular component

Encountering a blank page issue when submitting form on a website using POST method

Using Angular 5 to retrieve data and dynamically fill form fields

Loading a Div Element on the Fly

transferring the form data to another page using AngularJS