Image Sprites & Hyperlinks

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:
 
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
<ul id="navlist">
<li><a href=""><span>Your Text</span></a></li>
</ul>
then in your css

#navlist li a {position: relative;} /* so you can position your span in relation to this */
#navlist li a span {display:none;}
#navlist li a:hover span {display:block; position:absolute; top:100px; left:0px; width:100px;}

That's rough but hopefully you get the jist. Hope that helps.
 
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?
 
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.
 
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?
 
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?
 
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.
 
Back
Top