Show current page with sprite navigation.

[thegamnaking]

I currently use sprite navigation across most of the sites I work on.

I was wondering if anyone knows any nice little tricks or has any video tutorial links to how to make a sprite navigation that shows what page the user is currently on. I've seen a few little bits of J Query on this, but nothing that really goes with what I'm looking for, or nothing that has a full tutorial.

I'd really appreciate it if any of you guys could help me out!

Thanks in advance!!

[Wickham]

I can show you tutorials for a current page using images here:-
http://www.wickham43.net/highlighthome.php
The first two examples only use background-color, so look at the third example for a CSS solution or the fourth for a PHP solution.

I haven't used a sprite, I used separate images, but it's simple to edit that.

Everywhere that I have an image url in teh styles, like


background:url(images/navbuttongreen.gif) no-repeat 0px 0px;

or


background:url(images/navbuttonorange.jpg) no-repeat 0px 0px;

you would use one sprite image. You need an image with the normal situation on the left with the visited and hover states underneath and on the right you need the current page situation with visited and hover underneath, so it would be like
http://www.wickham43.net/images/menuhomecombined.gif but with the three current page bits added to the right.

In the code above 0px 0px; is the x position and y position, so you edit the y to move the background up or down for the visted and hover states and edit the x to set the current page positions, so current page visited and current page hover would have both x and y different from 0.

Leave out the background-color from the styles if you don't have text over the background-images, or have the text off-screen.