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".

enter image description here

possible duplicate of [Click through a DIV to underlying elements](http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements) **or** [Ignore mouse interaction on transparent parts in image and assign it to the image below](http://stackoverflow.com/q/2607162/94197) — Andy E, Mar 14 '12 at 13:24

score 1 · Answer 1 · answered Mar 14 '12 at 13:11

1

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.

answered Mar 14 '12 at 13:11

Naftali

144,921
39
244
303

Than the text will be over the image. It will does not help. – podeig Mar 14 '12 at 13:18

score 0 · Answer 2 · answered Mar 26 '13 at 22:06

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);

score 0 · Answer 3 · answered Mar 14 '12 at 13:11

0

If the image is static and not moving you can easily use image maps or put your links on top of the transparent image.

answered Mar 14 '12 at 13:11

epoch

16,396
4
43
71

score 0 · Answer 4 · answered Mar 14 '12 at 13:14

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

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

4 Answers4