Dettect Button click When a image is on it

Question

I have a button and an image when i click on button image get moved on it . but when i again click on this button button click did not perform because image get over it. I am trying that when image get over the button after this button click should be able not be disable. But i am unable to do it. I have this link in which i used a button and an image now some part of image is on button and half of the button is not covered with image . When i click on part of button which is covered with image button not being clicked effet but when i click on remainig part which is covered with image button gives me clicked effect.

Any help that i can be able to click button when a image is over it JS FIDDLE

<button class="stage"
                    style="width: 43px; height: 50px; margin-left: 65px;"
                    onclick="myFunction('a','1');" id="a"></button>

<img id="player" src="http://s18.postimg.org/wfl7311th/i5_Es6_2.png"
                    style="margin-left: -45px;margin-top:10px" />

Answer 1

There are several possibilities to achieve this.

• Play with z-index (maybe with opacity too) and rise buttons over the image
• Set pointer-events: none for the image
• Attach onclick to the image, hide it temporarily ( visibility: hidden ), and detect the clicked element with elementFromPoint() method

Answer 2

Give the image as background like this

     <button class="stage"
                style="width: 43px; height: 50px; margin-left: 65px; background-image:url(http://s18.postimg.org/wfl7311th/i5_Es6_2.png)"
                onclick="myFunction('a','1');" id="a"></button>

Answer 3

You can add onClick handler to the image to "transfer" the click:

onclick="document.getElementById('a').click();" 

See http://jsfiddle.net/EV9Pq/1/

Answer 4

If i understand correctly, your images is on Top of your button and the click event which is registered on the button is not firing when the image is on top.

i reckon this may be of some assistance :)

$('.imagelink').click(function(){
$('.targetButton').trigger('click');

});

fiddle - http://jsfiddle.net/luciferous/jLV2x/1/

in a nutshell we are triggering the click event of the button when we click on the image (which lies on top of the button).