Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Image Sprites & Hyperlinks

Discussion in 'Website Design Forum:' started by wac, Jan 29, 2011.

  1. wac

    wac Senior Member

    I’m working on a new site at the moment, it’s here!
    The hovers are all a single image sprite and below them I want to have actual text that also functions as a link.
    Is the best way of doing this, to somehow expand the clickable area of each sprite coordinate to extend over some plain text. Or would it be better to have regular hyperlinks that also activated their corresponding rollover? :rolleyes:
     
  2. tbwcf

    tbwcf Active Member

    Looks like your background Image is on the li at the moment, you'd be better putting this on the anchor (link) as hover won't work on anything other than an 'a' in IE 6 - just a quick pointer.

    For text appearing underneath you could put a span in there
    That's rough but hopefully you get the jist. Hope that helps.
     
  3. wac

    wac Senior Member

    Cheers for the response Andy, I'll look into the IE6 thing. As for the code I'm afraid I don't get it (im a code newbie). Are you saying that my link elements should be connected to the same id as the hover element of the image?
     
  4. tbwcf

    tbwcf Active Member

    Not sure exactly what you mean? your images are just backgrounds of the li elements so wouldn't have id's..

    I've used the #navlist id in the CSS just to make it more specific so it only effects the list-items, anchors and spans within that parent rather than any others you may end up with on your page.

    I knocked up a quick example of what (I think) you are looking to achieve - http://theboywhocriedfox.com/menu-example.html

    So basically on hover you can have text appear under your images. Hovering shows the span holding your text which is nested within the list-item and hidden by default.
     
  5. wac

    wac Senior Member

    Your example is incredibly helpful Andy, the only difference between that and what I'm hoping to achieve is that the text needs to be visible before the rollover, would this be relatively straight forward?
     
  6. tbwcf

    tbwcf Active Member

    Very just change this line within
    ul#menu li a span
    To
     
  7. wac

    wac Senior Member

    Andy = Legend! :)
     
  8. Sunburn

    Sunburn Active Member

  9. wac

    wac Senior Member

    Geoff, this is a cracking example. It's also a really good use of typography, I initially thought the text was images. I notice though that they're only using sprites in pairs
    http://swwweet.com/img/contact-nav.png

    rather than having the whole lot as one image, why would that be?
     
  10. Sunburn

    Sunburn Active Member

    Its likely just the way they sliced it out of their visual designs, your right, it would have made more sense to make a whole sprite file.
     

Share This Page