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?
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
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.
give the button a higher z-index maybe?
Give the button a higher z-index to make it come above the transparent image
document.getElementById('buttonId').style.zIndex = -5
Although I wouldn't recommend it, you could create an anchor with the following style:
a.className {
display: block;
width: [width of button];
height: [height of button];
z-index: [above image];
}
To mimic the button action....
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.
Related
My situation is a bit tricky and hard to explain, hopefully I can do this clearly.
On my website I need it so you click on something and it downloads an image, but the object you click on must allow the :hover psuedo class to change the image on :hover.
How I've set it up is as follows:
http://jsfiddle.net/6NuTv/
If you remove visibility:hidden from the HTML, the image appears and the browsers' download function becomes available.
I can choose which image the img src= is, but adding visibilty:hidden will disable the download ability.
To reiterate - I need it so you you hover over prof_wl_btn and it downloads the <a>'s href=... image and on hover/mouseover prof_wl_btn changes it's background position (so far using psuedo class).
Possible Methods
1: Use javascript onMouseover and Z-Index, but I can't get z-index to work here...
2: I tried using the CSS attribute clip:rect(Xpx,Xpx,Xpx,Xpx); but that crops everything.
If this is unclear I'm sorry, this is hard to explain! I can't find any other post like this.
Ok rewrite, since OP clarified in comments.
You can either have a background image that shifts on :hover, or if the image must be in the HTML then you can indeed move it on :hover of its parent, but if you wanted alt text to always show that won't happen here.
<img src="someiImg" alt="Download ze image, yes">
Make one large image (someImg) showing both states (normal/hover). They can be top bottom or side-to-side. I like top-bottom. Let's say the image you want to show is w 40px by h 40px. Your new sprite image showing both states, if top-bottom, will be w 40px by h 80px;
Set the anchor to block context (display: block, float, whatever).
Set height and width on teh anchor equal to the amount of image you want the viewer to see (so in this case, width and height of the anchor is 40px).
Set anchor to overflow hidden. Now you should only see the 40 x 40 part of the image you want users to see before they do anything.
You can now either set the anchor to position:relative and the img to position: absolute, OR leave them and use negative margins (you'll have to make the img also in block context to do this). Let's say you do the latter:
a img {
display: block;
}
a:hover img, a:focus img {
margin-top: -40px;
}
Because the anchor has overflow hidden, you'll still only see a 40 x 40 window of the image, but now you see the bottom part. As a bonus you get keyboard working there too.
If you want to use positioning, you'd relative-position the anchor, absolute-position the img, set the image in normal state to top: 0 and left: 0, and on hover/focus of the image set top: -40px;
I'm still not totally sure what you mean, but i think you're trying to do this
a img {visibility: hidden;}
a:hover img {visibility: visible;}
but I think the best way would be to set the background image of the link to be the image, then change the background image on hover.
I have a div with background image which contains 3 colors of the same icon
I shift the icon (background-position: top/center/bottom) according to what page is user viewing:
All works fine utill I zoom the page (ctrl + mousewheel) - than the background image seems to shift one pixel up or something, so i can see one-pixel line of the other icon at the bottom of my wrapper div:
Screens are from IE but it looks even more broken on iPad...
Any thoughts about what is causing this and how to fix it?
You can prevent any of the other images inside the sprite from showing by using diagonal sprites, or simply leaving some space between each image.
I shift the icon (background-position: top/center/bottom)
Use should use explicit px offsets instead. I suspect that will be slightly more robust when it comes to zooming.
There's nothing you can really do to prevent things sometimes being "1px off" when you zoom.
For example, if you have a 42px high element, and you zoom to 125%, then you have a 52.5px high element. The browser must round that number one way or the other.
Since those images are bitmaps, they always gonna look bad wen you zoom them.
You can do tree things:
Use a library like raphael JS and inlude your icons as vectors: http://raphaeljs.com/
Wrap your icons into spans for example and using a PX size and not EM's.
Leave more speace between your sprites
Try to make better resolution image and try it again.
It's better practice (and ultimately gives you much better control) to use pixel positioning rather than top/center/bottom when implementing CSS sprites, that way the image you want to show can be slightly larger (or with a little spacing) and therefore support that visual overflow you're seeing when you zoom. Your other images/states won't be affected by the neighbouring image/state because you're setting their position with a pixel-specific location rather than top/center/bottom e.g. (from article link below)
#panel-a {
background: transparent url(sprite.jpg) 0 -200px no-repeat;
}
#panel-b {
background: transparent url(sprite.jpg) -96px -200px no-repeat;
}
#panel-c {
background: transparent url(sprite.jpg) -172px -200px no-repeat;
}
#panel-d {
background: transparent url(sprite.jpg) -283px -200px no-repeat;
}
Not to mention that pixel positioning allows you to add additional states to your image without affecting other existing states if you add them onto the bottom of your image, for example. Of course that changes when you start adding images horizontally.
Here's a good reference: http://www.alistapart.com/articles/sprites
Is there a way I can have a partially transparent image (or anything really) overlay a clickable region using XHTML and CSS?
#thirtydot If you know of a solution
that works in only one browser I still
would love to here it! Although the
more support the better.
You can use pointer-events: none.
Browser support: http://caniuse.com/pointer-events (works everywhere except IE10 and older)
http://jsfiddle.net/QC5Yw/
Wrap the overlay and background in a clickable div, and set the opacity attribute of the overlay to something less than 1.
http://www.w3schools.com/Css/css_image_transparency.asp
No, the top z-index element will have the focus. But you can create another transparent top layer over the overlay layer, this one will be clickable. So:
z-index:1 Content element
z-index:2 Mask/Overlay element
z-index:3 Click element
That's because the browser cannot distinguish where your PNG is transparent. It just takes it as an image and will not pass the focus through if there are transparent pixels in it.
Thats why you can put a completely empty div with fixed with and height and it will be clickable.
On roseannebarr.tumblr.com, when you hover on my icons instead of them going up naturally they are cut off even thought I don't have a set height. I know my HTML is screwed up because I'm using a million ids but my page works off of browser bugs so just ignore it. Any ideas?
This was probablly the dumbest question ever sorry.
They are not cut off, you make the container smaller by moving the image outside the container using a negative top margin.
A simple solution is to put the black background on the #block style intead of on the #outer style. That way the image gets the background instead of the container, so the background follows the image when it moves instead of shrinking with the container.
Are you talking about the black background getting cut off when you hover over it? Do you want the whole icon including the background to go up? If so, you should just put the :hover on #outer instead of #block:
#outer:hover {
margin-top: -10px;
}
Don't know if that's what you mean. If not, let me know. :)
By default, only the text of links is clickable in IE 6. I’d like to make the entire area inside the link (i.e. including padding) clickable as well.
I also need this area to be transparent, as the link covers half of a photo. Adding a background color makes the padding area clickable, but defeats the object, as the link is hidden.
I could have sworn there was a way to do this.
display: inline-block; usually works for me.
display: inline-block is the correct answer, as Kobi says. There is no div or transparent div behind it, just the link element. When the inline-block attribute is applied to it, any padding (and I think line-height) becomes as if it were part of the link.
I remember having come across the same problem but my recollection is hazy about the proper workaround (and if there even was one).
Can you try giving the link a background-color: transparent or a transparent background image? That might work.
If nothing else helps, give the surrounding element a Javascript onclick attribute, and cursor: pointer to simulate link functionality at least for those with JavaScript.