SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot TheMonk's Avatar
    Join Date
    Oct 2005
    Location
    Canada
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Css image rollovers in a responsive site?

    Hello,

    I've been building responsive sites for a little while now and so far everything is going great. However there's one technique I haven't figured out how to port to responsive and I can't find any sites that tackle it. That is css image rollovers.

    Now 5 years ago or so css image rollovers were all the rage. "You don't need javascript to do rollovers!" was the big proclamation, and it was true and everyone was happy. Now in the new jQuery/Responsive reality, I haven't seen anyone try and get this working in a responsive layout.

    So here's the problem.

    In an old site I'd have a div like so

    Code:
    <div id"home_button"><a href="home.php"></a></div>
    And some CSS like so. (This assumes the button has dimensions of 100px x 100px.)

    Code:
    #home_button a:link, 
    #home_button a:visited, 
    #home_button a:active {
        background: transparent url("../images/home_button_background.jpg") no-repeat scroll 0 0;
        display: block;
        height: 100px;
        text-decoration: none;
        width: 100px;
    }
    
    #home_button a:hover{
        background: transparent url("../images/home_button_background.jpg") no-repeat 0 -100px;
    }

    In a responsive design it's not unreasonable to want <div id"home_button"> to resize dynamically based on device/viewport. However since the background image is based on pixel perfection, how can you resize the div and still get the background to reposition itself as desired?

    Challenge: I know you can use things like jQuery etc... to get this working. But using a javascript library to fix something so simple seems like overkill. Preferably I'd like to keep this as simple as possible.

    Any thoughts or ideas?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TheMonk View Post
    In a responsive design it's not unreasonable to want <div id"home_button"> to resize dynamically based on device/viewport. However since the background image is based on pixel perfection ...
    You can't have everything.

    But there are ways around it depending on the background image. If it were a gradient that goes from top to bottom in the normal state and bottom to top in the hover state, that would be easy, as you'd just have a bigger image than before and position it from the top in one state and from the bottom in another, for example.

    Or if it's something like a photo with different states, you can make it much bigger than the button area, so that, if the button expands, you'll just see more of the image.

    Are you thinking of a specific example?

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    The biggest problem you've got there is that browsers are not generally all that hot at resizing images on the fly, and I particularly wouldn't want to put that load onto mobile browsers. That means that if you're going to have images that resize, you'll have to resize them beforehand and give browsers the choice of which size image to use (which you can do with media-queries.

    If it's the sprite issue that you're worried about, you might be better off using % rather than px to position the background – that could give a better way to centre the image on the element, if that's a sensible design choice.

  4. #4
    SitePoint Zealot TheMonk's Avatar
    Join Date
    Oct 2005
    Location
    Canada
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You can't have everything.
    I know somedays I wish I could!

    Quote Originally Posted by ralph.m View Post
    Are you thinking of a specific example?
    No nothing at the moment really but is it something I've been trying to solve. The article on the front page about resizable background images got me thinking about this problem again.


    Quote Originally Posted by Stevie D View Post
    If it's the sprite issue that you're worried about, you might be better off using % rather than px to position the background – that could give a better way to centre the image on the element, if that's a sensible design choice.
    Yeah the % is something I've considered. I'd need to have some empty space between images to make up for scaling issues when the box resizes. You're also probably correct about the different divs and images for different break points. As ralph said, guess I can't have it all. heh.

    Thanks to both of you for the feedback!

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I'm into "responsive design" at the moment (though I don't like the name ... "adaptive" sounds better to me) but I have to admit that I don't see the rollover thing as a problem. I normally only use it on small element anyhow (like a logo) which is fine left at a fixed size. And if you need expanding menus with rollover backgrounds, as said above, the background image can be bigger than needed to accommodate expansion ... as long as the image isn't too fancy.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You could use css3 background size for modern browsers. It would probably be easier to not use sprites for the rollover in this case but use the double stack method and apply the rollover image as a background to the parent and then just hide the anchors background on rollover

    This site has some other example.

    Of course images scaled by the browsers are never as crisp as those made to measure and indeed for mobile you may want to start with the smallest filesize image by default and then scale up for better devices.


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
  •