How to get «onclick» event through a transparent image?

Question

I have a html page. In the middle of the page I show a gif-image which is partly transparent.

If I click on tranparent parts of the image on links which are under the image I do not get «onclick» event because of the image.

Is it possible to ignore image and get events on the links?

UPDATE: My layout: It is not possible to click on "Alternativ".

Answer 1

Make an event, fire it off:

var realTarget = document.querySelector('...');
var img = document.querySelector('...');

img.addEventListener("click", function(evt) {
  var newEvt = document.createEvent("MouseEvents");
  newEvt.initMouseEvent("click", true, true, window,
    evt.detail, evt.screenX, evt.screenY, evt.clientX, evt.clientY, 
    evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 
    evt.button, evt.relatedTarget);
  realTarget.dispatchEvent(newEvt);
}, false);

Answer 2

Well if the links are under the image, then they are unclickable.

What you might need to do is decrease the css z-index of the image, and increase the z-index of the links to make them clickable.

Answer 3

如果图像是静态的并且不移动，则可以轻松使用图像地图或将链接放在透明图像的顶部。

Answer 4

I actually don't know your layout, but I think, there are several possibilities. You could use an imagemap to simulate a click on the links under the gif. So, where the link is positioned you define a clickable area in the image map. Anothe possibility would be to use the gif as background image. Shouldn't change anything in the layout and the links would be on top.

HTH,

--hennson