OK, I don’t usually post to forums, but I’ve come across a really difficult problem there just HAS to be a solution for.
I have a large image (1000x800) on a web page I’m designing. It’s a screenshot of a website, but it has a sort of polaroid border around it. When the user hovers over this image, I want the screenshot, but not the border to become dimmed, so I can absolutely position some text over it.
Because I only want part of the image to dim, I assume the only way to do this is to create a second image, problem is, with the standard, swapping out background images trick, the second image takes ages to load, being very large, so this is not an option.
The second idea I had was to put the two images into one composite image, give the containing div a fixed height and then change the background position to say -800px on hover. However, this website must be fully fluid, and I’m using img { max-width: 100%; } to make the images flexible too. As you can’t do this for background images, that won’t really work either.
The last technique I tried was to use an img element, and a containing div with overflow: hidden. Then relatively positioning the img element on hover. However, because the div needed to have a fixed height, and the img element needed to scale, what happened was that the img element appeared in the visible area of the div when the window was resized.
So I’m out of ideas. Could anyone help?
Hehe… I feel your pain. IE6 really needs to go the way of Old Yeller -
MS should take it out back with a shotgun and do what needs to be done.
You could use javascript to preload the second image like so:
preload = new Image(1000, 800);
preload.src = "images/image2.jpg";
That would make the image load into the users cache before they ever see it on the screen and you should then be able to use your first technique without suffering from a download lag when swapping the images.
IE6 can ** **. It’s got a smaller Market share than chrome now. I won’t even be testing in it. I know the max-width trick doesn’t work in IE6 anyway, and I’ve got transparent pngs and I’m fed up of using alphaimageloader. I have to sort out IE6 for clients all the time, and this is a personal website so I’m enjoying the liberty of being able to drop support for that shitpile. I might serve IE6 users a picture of a **** just to let them know how much I hate them.
Ah, fantastic. Glad to hear it all worked out for you! That’s a neat little trick, I’ll have to keep that in mind for if I need to do a simple image swap and don’t want to involve javascript.
IE6 may take issue with using :hover on a non-anchor tag, so you should be aware of that.
I didn’t really want to use JavaScript to make the fundamentals of my page work. But I got it to work in the end. I used the composite image technique bit with them side by side instead of on top of each other like before. Then set width to 2000px and max-width to 200% so that it scaled correctly, and on #screenshotImg:hover I did position relative and left: -100%. works like a dream.