CODEWITHSUNDEEP
javascripthtmlimageevents
podeig
podeig

Reputation: 2741

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

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

Upvotes: 1

Views: 2413

Answers (4)

Mike 'Pomax' Kamermans
Mike 'Pomax' Kamermans

Reputation: 53616

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

Upvotes: 0

hennson
hennson

Reputation: 811

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

Upvotes: 0

epoch
epoch

Reputation: 16615

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

Upvotes: 0

Naftali
Naftali

Reputation: 146310

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.

Upvotes: 1

Related Questions