Disable image over button

Question

I have a transparent PNG that partially overlaps a button. The buttons becomes inactive where the image overlaps. Is there a way to turn the transparency "off" so the button is clickable behind it? Or are there any other tricks that might fix this problem?

Answer 1

give the button a higher z-index maybe?

Answer 2

Give the button a higher z-index to make it come above the transparent image

document.getElementById('buttonId').style.zIndex = -5

Answer 3

The img transparency has nothing to do with whether or not you can click the button, so 'turning the transparency off' is not going to do anything for you.

As Mar_Garina points out, z-index is what determines which element lies above/below other elements. If you want that button to always be on top, give it a higher z-index. Note however that this image will the be overlapped by that button which may not be what you want.

Also check out button sliding doors with css if you're looking for some custom button styling

Answer 4

Although I wouldn't recommend it, you could create an anchor with the following style:

<a href="#" class="className">&nbsp;</a>

a.className {
  display: block;
  width: [width of button];
  height: [height of button];
  z-index: [above image];
}

To mimic the button action....

Answer 5

Couldn't you do this instead:

<style type="text/css">
#button
{
background-image: url("[image location]");
width: [image width];
width: [image height];
}
</style>

And

<input type="button" value="button" id="button"/>

This makes the button clickable and makes the image ontop.

Answer 6

I would say that in general, there is indeed no solution to the problem. An image area is always rectangular, no matter whether its pixels are transparent or not.

However, @Chief17's answer gave me an idea that might work if your button is not using the OS's rendering style, and doesn't have a background image itself.

If that is the case, and the general layout situation permits it, you could set the image that should overlap the button as that button's background image - in addition to the image floating around on the page. Using background-position, you would then have to adjust the image's position so that it almost leaves the visible area of the button, covering only the small overlapping area that the button should not cover.

Is that understandably put? It's using the button's background-image property to fake overlapping while in truth, the overlapping area is the background image of the button.

This works only when you have really tight control over the button's position and other factors. It may not work out for you.