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.
Related
Is there a way for me to make links clickable both in an overlay DIV and on the surface behind the DIV?
I know about POINTER-EVENTS: None; but it is not a solution in this case because it only makes links clickable on the surface behind the overlay DIV making links in the DIV untouchable.
Sorry if this is a duplicate question.
The property you want here is z-index. Specifically, you want to make it higher on the anchor tags you want to click on than on the header.
First, you'll want to add a class to the anchor tags (let's call it above-header) for specificity, so that the links all look like this:
Link
Then you'll want to add the following CSS to apply the new positioning to the anchor tags:
.above-header {
position: relative;
z-index: 1001;
}
position: relative will make the z-index applicable to those anchor tags without moving them at all, while z-indez will raise them above the header (and make them clickable) as long as their z-index value is larger than that of the header (which is currently 1000).
I would also lower the z-index on .header-area to 1, and then make the z-index on the anchor tags 2, but that's mostly a matter of code style.
I have two different elements (div class="") within a larger container.
Let's call them div class="overlay_container" and div class="title." The div class="overlay_container" has a subclass, .image, which creates an overlay over the entire larger container on hover.
The div class="title" has a z-index of 10,000 and lies over .image and therefore over the overlay. Unfortunately, when you hover over "title," the subclass overlay image underneath disappears.
I know the problem is obviously that the "title" div is right over the other divs and therefore the on hover will disappear due to the z-index. But how do I fix this? How do I make it so that when you hover over the "title," the .image overlay still appears?
If your answer involves jQuery, could you please tell me where to put the script (before the /head tag)? Thanks!
Adding pointer-events:none; to the title div might work?
Looks like most browsers recognise it, except for....dun dun dun...IE: http://caniuse.com/#search=pointer-events
I know I can't change the src attribute of an <img> tag with CSS. But is there a possiblity to hide the image from the src attribute, and set a background image on the <img> tag instead?
i thought something like that: moving the actual image with padding/text-intend etc. out of view and after that setting the background-image of the img-tag, so it looks like an other image.
Js is not an option, because it's about templating an existing page.
you could hide the image itself:
img#someid { display: none; }
and then (or before that if you wish) set background on the parent element.
You can do that by pointing the img src to a 1x1 blank gif image.
This is necessary if you don't want to add another div since all browsers handle missing images and empty src attributes differently. (chrome will add a border around the image if the image is missing for instance.)
Then you can change the images just by changing the background-image property.
UPDATE
You can also create image sprites for that and animate them by altering the background-position property. For instance:
Lets say that you have two 50px wide images and you want the second one to show when that element is hovered. Just merge them together in one image, and the css above would do the trick.
img { background: url(sprite.jpg) 0 0 no-repeat; }
img:hover { background: url(sprite.jpg) -50px 0 no-repeat; }
I'm not quite sure what you mean with 'hide the image of the src attribute' but if you mean hide the link/path of the image you are displaying, using CSS (even as a background image) then the answer is no, not that I'm aware of. People can easily view your CSS file. The only real way to hide it is with JS, but even with that you can disable the JS from the client and still view it. You could put it in a DB like MySQL and display it using PHP but even at that, the image path would still be shown.
Would you be able to wrap the img in a div with no padding/margin, and make the img's display attribute to hidden (via js) so the div's background would be shown.
But honestly, if you take the trouble to do this, you should just swap the src of the image via js.
I have a site where the page is formatted to be 800px wide with an image taking up the top 40 pixels. I wrapped the image with an anchor tag so that clicking on the image takes user to home page. When I wrap the image with an anchor tag, the image seems to shift to the right a little bit which throws of the alignment!
Is there a way I can clear absolutely all formatting from an anchor tag?
Must be the classic image border issue that adds a visible border to your image if it's a hyperlink. Try this (if you wish, edit the a img part to only target your header or the image ID or something):
a img {
border: 0;
}
David is right in his comment; Every style for the anchor tag (border, margin, color, :visited, etc) has to be individually undone. BoltClock's suggestion is sufficient for me, but for anyone else who truly does want to reset any tag, try looking at Yahoo's reset CSS (http://developer.yahoo.com/yui/3/cssreset/).
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.