CSS Navigation/Rollover question

I have the following CSS based navigation, the rollovers work perfectly, as does the active. My question is, is there a way to display a different image showing which page the viewer is currently on, using only CSS and HTML? (And yes, I realize there's only an :active class for one link, I haven't finished everything else yet.)

CSS:

/* Begin Navigation */

#nav {
width:557px;
height:64px;
padding-left:21px;
padding-right:2px;
position:absolute;
left:25%;
top:0px;
z-index:2;
}

#nav_home {
background-image:url(images/btn_home.jpg);
width:72px;
height:64px;
position:absolute;
top:0px;
left:21px;
z-index:4;
}

#nav_home:hover {
background-image:url(images/ro_home.jpg);
width:72px;
height:64px;
position:absolute;
top:0px;
left:21px;
z-index:5;
}

#nav_home:active {
background-image:url(images/act_home.jpg);
width:72px;
height:64px;
position:absolute;
top:0px;
left:21px;
z-index:1;
}

#nav_about {
background-image:url(images/btn_about.jpg);
width:72px;
height:64px;
position:absolute;
top:0px;
left:93px;
z-index:3;
}

#nav_about:hover {
background-image:url(images/ro_about.jpg);
width:72px;
height:64px;
position:absolute;
top:0px;
left:93px;
z-index:4;
}

#nav_designs {
background-image:url(images/btn_designs.jpg);
width:72px;
height:64px;
position:absolute;
top:0px;
left:165px;
z-index:3;
}

#nav_designs:hover {
background-image:url(images/ro_designs.jpg);
width:72px;
height:64px;
position:absolute;
top:0px;
left:165px;
z-index:4;
}

#nav_resume {
background-image:url(images/btn_resume.jpg);
width:72px;
height:64px;
position:absolute;
top:0px;
left:237px;
z-index:3;
}

#nav_resume:hover {
background-image:url(images/ro_resume.jpg);
width:72px;
height:64px;
position:absolute;
top:0px;
left:237px;
z-index:4;
}

#nav_contact {
background-image:url(images/btn_contact.jpg);
width:72px;
height:64px;
position:absolute;
top:0px;
left:309px;
z-index:3;
}

#nav_contact:hover {
background-image:url(images/ro_contact.jpg);
width:72px;
height:64px;
position:absolute;
top:0px;
left:309px;
z-index:4;
}

/* End Navigation */
HTML:
<div id="nav">
<ul>
<a href="index.html" title="Link to Home"><div id="nav_home"></div></a>
<a href="about.html" title="Link to About Me"><div id="nav_about"></div></a>
<a href="designs.html" title="Link to Design Gallery"><div id="nav_designs"></div></a>
<a href="resume.html" title="Link to my Resume"><div id="nav_resume"></div></a>
<a href="contact.html" title="Link to Contact Information"><div id="nav_contact"></div></a>
</ul>
</div>
No, it's probably not the best way to do it, but it works, and I'm happy with it. I'm always open to suggestions, though. ;)

While I'm asking questions... Is there another way to position the <div id="nav"></div> other than using position:absolute;, while still using z-index?
I had been trying to use margins, but they didn't seem to be working with z-index.

http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css

yep there is ;)

oops, your second question. you can use position: relative and still maintain the z-index as well. if you need help getting it position in your site, you'll to show all the code of course.

Maybe it's just tiredness blocking my mind, but I don't see how that works with images... As for the position, I was sure I tried relative, but maybe it's another hallucination. ;)

Thanks!

well we can combine 2 techniques and retool your code a little to make it work just fine ;)

http://www.alistapart.com/articles/slidingdoors2/

so if you made your on/off images into one image you could write your css like:


#nav_home {
background: url(images/btn_home.jpg) top left;
width:72px;
height:64px;
position:absolute;
top:0px;
left:21px;
z-index:4;
}

#nav_home:hover {
background-position: top-right;
}


so on hovering the link the images just 'slides' over .

then to hold the current page you could do:

body#home a#nav_home, body#what a#ever, body#what a#ever {
background-position: top-right;
}


now if you didn't want to do the sliding doors technique you could write your css like:


#nav_home:hover, body#home #nav_home {
background-image:url(images/ro_home.jpg);
width:72px;
height:64px;
position:absolute;
top:0px;
left:21px;
z-index:5;
}


you don't need to repeat all the stuff in red as your already defining it on the link before that in your css.

So in the first way, you could use sliding doors and when you write the active state css, you would just chain all the active together. I'm a fan of sliding doors as it loads just one image for the link as opposed to a seperate one for each state and I think it's neat.

in the second way you keep your core css the same just adding 1 more rule to it.

See, http://www.codingforums.com/showthread.php?t=122490