How to make absolute positioned image area maps clickable with mouse?

Question

I have several images positioned on top of each other using absolute positioning. These images are partially transparent, and have a html area and map to make only the visible parts clickable. In jQuery, I have attached mouse events to the area tags.

This works well for one image: mouseenter and mouseleave fire only when the mapped part of the image is entered.

The problem is that it only works for the top image. For all others, it doesn't fire events not does CSS hover work, because there is another image on top of it. This despite the fact that the areas do not overlap and maps are in front of the images.

Here is a demonstration of the problem: http://markv.nl/stack/imgmap2/

Exhilarant

Is there a special reason for overlapping multiple images? Why not separate and display it all in one layer? – Poore

Can you please ask a question? – Sphericity

I added a question. Can't use one image because I want to change the individual images on hover. – Exhilarant

Answer 1

You can place a single, completely transparent image on top of all individual images, and attach all imagemap areas to that image. It will act as a capturing element for the mouse events, and you can still change all individual images.

Mackler

A detailed explanation can be seen at this SO Answer, which also shows a different approach not used that the SO Question poster suggested. – Haihaida

Answer 2

It's not a direct answer/solution...

Why don't you use a canvas/SVG to do the drawing? There is plenty of libraries which make the task easy. One of them is RaphaëlJS (check this example). The advantage of this library is that it allows mouse interactivity.

Another library you may consider is EaselJS, but it doesn't work in the browsers not supporting <canvas>, so no IE < 9 support.

Chapman

This RaphaëlJS Example is a lot closer to the OP's linked example. – Haihaida

Answer 3

It works only if the images don't overlap (see figure). In your case all the images have exactly the same size and are stacking upon each other. Since Browsers treat images as solid objects (they don't bother about transparency), there is no way how it could determine, which image you want to hover at the moment?

  +-----------+-----------+
  |           |           |
  |   img1    |   img2    |
  |           |           |
  |           |           |
  +-----------+-----------+
  |           |           |
  |   img3    |   img4    |
  |           |           |
  |           |           |
  +-----------+-----------+

However, you can work around this:

Just use a single imagemap on one of the images which contains all areas, and with a little javascript you can trigger the hover-effects on all the other images.

$("area").hover(function(){
    var $target = $("#"+$(this).data("target")); // getting the target image
    $target.attr("src",$target.attr("src").replace("slice","slice-focus")); //replacing the src with the src of the hover image
},function(){
    var $target = $("#"+$(this).data("target"));
    $target.attr("src",$target.attr("src").replace("focus-","")); //revert the changes
});​

Working example based on your code: jsFiddle-Demo

Sphericity

Answer 4

You can also palace transparent div with fixed height and width that will have onclick() event with binded function. somehing like:

<div style="position: absolute; top: 10px; left: 10px; width: 100px; height: 100px;" onclick="dosomething();"></div>

Votaw