Images as navigational items, and google-friendly HTML markup

I built a website, and the design required me to use jpgs, with text on them, as links for my main navigational menu. I required the active link to show a different image to the other links.

Dimmy helped me with a pure css solution for this here:
http://modxcms.com/forums/index.php/topic,25000.0.html

and it works really well. But.....

Now, I am doing optimization for this website, and I realized that this method, in the way I have implemented it, is actually in violation of Google’s webmaster guidelines: http://www.google.com/support/webmasters/bin/answer.py?answer=66353

Due to the "hidden" text ( font-size: 0 ). Now, if this was just a few links here and there I wouldn’t mind, but for the main navigational menu I don’t want to upset Big Brother.

So, I need to move the images out of the css (background images) and get them in to <a>HERE</a> for all of the navigational links, and make use of alt attributes for SEO value.

Seeing as the image per link is unique, *and* there are separate images for active and inactive states, clearly I need to dynamically generate what shows <a>HERE</a>. And, honestly, I am out of my depth to do that. Is there a solution for this using Wayfinder, or will I have to get one of my programmer friends to help me create the menu with javascript, and a no script version in the HTML?

Any pointers would be appreciated, thanks.

Use an image replacement method that does not hide the text..and is fully accessible. There are a few to choose from:
http://mezzoblue.com/tests/revised-image-replacement/

Here is another interesting article: http://www.456bereastreet.com/archive/200712/choose_an_accessible_image_replacement_method/

Since these are css based you can easily integrate with wayfinder

Quote from: dev_cw at Jun 02, 2008, 04:00 PM

Use an image replacement method that does not hide the text..and is fully accessible. There are a few to choose from:
http://mezzoblue.com/tests/revised-image-replacement/

Here is another interesting article: http://www.456bereastreet.com/archive/200712/choose_an_accessible_image_replacement_method/

Since these are css based you can easily integrate with wayfinder

Thanks. I am familiar with Mezzoblue, and these methods all have the same problem as the method I used already - nothing is shown with images off/css on...
All except the Gilder/Levin method, but i believe it doesn’t work for links- 456bereastreet suggests to use "Gilder Levin Ryznar Jacoubsen IR" for links, so does noupe.com...but the ryznardesign.com website is down, and I didn’t find a comprehensive tutorial for that method elsewhere.

On the page at Mezzoblue there is a description of the Gilder/Levin Method where you place the image in front of the text in a span. There is a problem here where if you increase the font size the text may show around the image, so be sure to set overflow:hidden to avoid this.

Quote from: dev_cw at Jun 03, 2008, 07:58 AM

On the page at Mezzoblue there is a description of the Gilder/Levin Method where you place the image in front of the text in a span. There is a problem here where if you increase the font size the text may show around the image, so be sure to set overflow:hidden to avoid this.

ok, I’ll implement that method. Just that I saw a few referenced to the modified version with Ryzner, and they specifically mentioned that method for navigation.

Thanks for your help.