• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Image Sprites & Hyperlinks


wac

Senior Member
#1
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:
 

tbwcf

Active Member
#2
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.
 

wac

Senior Member
#3
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?
 

tbwcf

Active Member
#4
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.
 

wac

Senior Member
#5
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?
 

Sunburn

Active Member
#10
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.