Setting a Cursor [With CSS] on an Image Map Area

Setting a cursor [with CSS] on an image map area

I recently had an issue with a css cursor displaying in firefox correctly, but not in chrome or safari.

Long story short, I ended up needed to set display:block; on the area tag. Either my base css, or the browser defaults the tag to display:none;

This was the quick test case I created (check it out HERE)

<img usemap="#map" src="http://i.imgur.com/9EcEvkn.jpg" height="120" width="100" />
<map name="map" id="map">
<area shape="rect" coords="0,0,120,100" href="#" />
</map>

area {
    cursor: crosshair;
    display:block;
}

Hopefully this helps someone.

Change cursor on click for a image map link with css

Not an answer to question, but, as in linked Q/A, a crude sample demo on concept of using anchors instead of map etc.

One can set cursor by using the trick of @user3920458 – but cursor will only change in Chrome and not in Firefox (and probably other browsers) when clicked.

Tested a JavaScript solution, on image map, but that also became very hackish – as Firefox seem to want cursor movement before changing the cursor back, sometimes it does not change at all etc. Guess one could make it work with some more tweaking and hacking, but not sure. Same for Opera.

As an alternative there is the use of anchors and absolute positioning. As a crude demo, here with some border tricks, but would likely be a “squares” solution – depending on how wide browser support is required.

Only tested in Chrome, Firefox and Opera. Opera does not change cursor on :active for anchors. That is: it has some of the same problems as Firefox during the click/mouse down hack for maps – one have to drag the mouse (whilst holding button down) for cursor to change – and is quite buggy.

The only final solution, AFAIK, would be to do it all in JavaScript and targeting MouseDown/Up events etc. on a image or div etc.

---

Example Fiddle using JavaScript solution.

OK. In at least Chrome, Firefox and Opera.

HTML:

<div id="wrap"></div>

CSS:

#wrap {
    position: absolute;
    left    : 0;
    top     : 0;
    width   : 620px;
    height  : 414px;
    margin  : 0;
    padding : 0;
    cursor  : crosshair;    
    background: url(http://i.stack.imgur.com/ntEJ4.jpg);
}

JavaScript:

// Check if px/py is inside polygon vx/vy.
function inpoly(vx, vy, px, py) {
    var i, j, c = 0, n = vx.length;
    for (i = 0, j = n - 1; i < n; j = i++) {
        if ( ((vy[i] > py) != (vy[j] > py)) &&
             (px < (vx[j] - vx[i]) * (py - vy[i]) / 
                   (vy[j] - vy[i]) + vx[i]) ) {
                c = !c;
        }
    }
    return c;
}

// The box.
var box = document.getElementById('wrap');

// X and Y Vectors for polygon around apple.
var vx = [169, 196, 226, 260, 280, 288, 277, 266, 247, 225, 208, 183, 170, 165];
var vy = [142, 122, 118, 122, 136, 173, 209, 229, 238, 242, 241, 223, 195, 169];

box.addEventListener('mousedown', function(ev) {
    if (inpoly(vx, vy, ev.clientX, ev.clientY))
        box.style.cursor = 'progress';
});

box.addEventListener('mouseup', function(ev) {
    box.style.cursor = 'crosshair';
});

---

Example Fiddle using CSS with absolute positioned anchor.

OK. In at least Chrome and Firefox; not in Opera.

HTML:

<div id="wrap">
<img src="http://i.stack.imgur.com/ntEJ4.jpg" />
<a href="#" id="target01"> </a>
</div>

CSS:

#wrap {
    position: absolute;
}
img {
    position : relative;
    top      : 0;
    left     : 0;
}
#target01 {
    position        : absolute;
    top             : 118px;
    left            : 164px;
    width           : 125px;
    height          : 127px;
   /*-webkit-border-radius: .... */
    border-radius   : 50% 40% 70% 68% / 50% 48% 85% 95%;

    text-decoration : none;
    outline         : none;    
    cursor          : crosshair;

    /* Only for demo purpose to show area. */
    background      : rgba(122,50,222,.5);
}

#target01:hover {
    background: none;
}
#target01:active {
    cursor: progress;
}

Hovering over image map does not change cursor to hand in IE

Got past this after 4 non productive hours :(

A reset stylesheet I was using had a 'body{cursor:default}' in it. But this shouldn't have been an issue because I had the 'area {cursor:pointer}' defined. But IE isn't overriding this. Seems like a bug to me. In the developer toolbar the cursor:default is struck across indicating that it has been overridden but in reality its not. Taking that line out (cursor:default) is what fixed it. phew!

Apply cursor css to area map

Because your <area> elements have a href attribute the auto behavior for a cursor is to be a pointer. If you want the default mouse cursor you need to change your CSS to.

area {
    cursor: default;
}

Here is your JSFiddle updated with this change

Other CSS Cursor options can be found listed at MDN

HTML map area tags are not showing pointer cursor when hovered

This problem is resolved after spending couple of hours looking on the web for a fix.

All what I did was remove the cursor:default; applied to the ''. Voila! The cursor:pointer applied to map elements are now working.

How to hide the cursor on an image map area

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/

area onmouseover cursor appearance

Safari isn't always supporting the "general" functions that other browsers do these days. But still, I can hardly believe that they wouldn't support an onmouseover event, so it's probably the rest of the code that's causing the problem for it not to work.

---

If really want to use javascript to apply the styling for a pointer then try to make it more specific like this:
onmouseover="this.style.cursor='pointer';"

---

But why use JavaScript when you want to add a styling? CSS alone would be enough just place this in your stylesheet and you can remove the whole inline onmouseover:

.desktop area:hover{
   cursor: pointer;
}

---

Or use an empty href="#"so the browsers sees it's a link and it shows the pointer by default.

Here's an example. Make sure your coordinates are in the image aswell of course!

img {
  width: 100px;
  height: 100px;
  border: solid 1px black;
}

<div class="desktop"> 
  <img src="docs/docs_overview_desktop.jpg" usemap="#desktop"> 
  <map name="desktop"> 
    <!-- Coords are from left uper corner (10px on the x and y axis) to the right bottom corner (90px on the x and y axis) -->
    <area shape="rect" coords="10,10,90,90" onclick="document.getElementById('lightboxSrc').src='docs/docs_000.jpg'; lightboxOpen();" href="#"> 
  </map> 
</div>

---

Related Topics