SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Tough Image Swapping Problem

    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?

  2. #2
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could use javascript to preload the second image like so:
    Code JavaScript:
    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.

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by Paul O'B; Aug 27, 2010 at 03:27. Reason: bad language edited - this is a family friendly forum so please respect that

  6. #6
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •