3 replies [Last post]
chilly
chilly's picture
Offline
Regular
Last seen: 12 years 48 weeks ago
Joined: 2006-11-28
Posts: 14
Points: 0

hey peeps,

gotta freind who (gods knows how) made a rollover nav bar (6 links) that only used two images! he explained to me that both images were loaded up as soon as you enter the site, then, on rollover only a certain point of the back image showed... i just dont get how he did it!

any ideas? you can see the working Nav at http://www.psycle.info

thanks

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 5 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Not trying to be funny, but

Not trying to be funny, but if he's your friend, why don't you ask him to explain it to you?
FWIW, it's not that uncommon a technique and I quite often use it, although I usually only use a single image. I cover it a bit in this article I wrote but basically, you create a single image for all the links which includes both on & off states and then use background-position to position it in relation to each link.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

chilly
chilly's picture
Offline
Regular
Last seen: 12 years 48 weeks ago
Joined: 2006-11-28
Posts: 14
Points: 0

I think my friend did it a

I think my friend did it a different way, using 2 images (one on and one off) and moved it around that way...

i would ask him, but he is the kinda person who is abit to clever at this kinda thing, and anything he says goes over my head.. i have to take this kinda learning at my own pace...

mklappen
mklappen's picture
Offline
Regular
Chicago, IL USA
Last seen: 10 years 36 weeks ago
Chicago, IL USA
Joined: 2006-11-28
Posts: 19
Points: 0

If you're looking to do

If you're looking to do something like your friend did, you can always view source of his page.

It looks like he's just using a normal list and then a single background image with the "glowing text" effect and then a negative pixel placement in his background so only the link hovered over will glow.

Psycle



#linkHome
{
width:100px;
}

#linkHome:hover
{
background:url(psycle_links_glow.jpg) no-repeat 0px top;
}

#linkProfiles
{
width:155px;
}

#linkProfiles:hover
{
background:url(psycle_links_glow.jpg) no-repeat -100px top;
}