I’m playing around with a new idea and I got most of it figured out, but I still need a bit of help.

What I am trying to do is have seperate images for navigation. When mouse rollover, the image for each link changes. I got that part working kindasorta.

The code for this looks like:

#contact {
float:right;
background-image:url(’../contact.jpg’);
background-repeat:no-repeat;
width:79px;
height:62px;
margin-right:-81px;
}
#contact:hover {
float:right;
background-image:url(’../contact2.jpg’);
background-repeat:no-repeat;
width:76px;
height:62px;
margin-right:-81px;
}

One problem I am having is that I have 6 links for this. When I click on a link, the links to the left of the one I click on do not return to the original image. If I click on the third link, the first 2 do not change back. If I click on the 6th one, the 5 to the left do not change.

Since I am obviously doing someting wrong here, maybe someone could tell me the best way to get these images to line up horizontally.

And finally, what I can’t quite figure out is how to get this all to work and when clicked on, goes to it’s corresponding page.

Any help would be greatly appreciated.

Thanks,
Vance