Getting rid of image links

[kiwanji]

To become more SE friendly I am considering removing my rollover images (which I love and may soon realize I use too much) in favor of standard text links. The problems are:

1.) I love the idea of using nonstandard fonts to bring the users eye to the link. In order to do this I use text images.

2.) The use of different colors upon rollover to give the page some interactivity and show the user that there is some element at that spot on the page.

I am guessing that some basic DHTML or javascript would be the advice I am going to get but I wanted to put this out there to the masters and see what I got... In your opinions, what is the best way to go about this?

My goal is to meet one of Google's main requirements, that there be text links on the site rather than images.

Thanks as always-

[TheWebographer]

If you go the CSS route you can list a number of fonts that you would like the users browser to use in order of preference. If the first font does not exist it chooses the next and then the next and so on. But you are still dependant on what they have for fonts.

Other than that you can make text look and behave very much like buttons using CSS.

[tedster]

Yes, CSS hover behaviors can handle a lot of the interactivity you don't want to give up - and with considerable bandwidth savings at the same time.

I started moving away from rollover images when IE started getting buggy with the way their cache worked on pre-loaded images. A rollover with a time delay is no good at all. But that was the same time that CSS support took a giant step forward.

Rollover behaviors already are a basic javascript approach - and a "pure" CSS solution gets you wider support. From what I see, turning off javascript client-side is much more common than turning off CSS.

[nex2k]

Forget the JavaScript and DHTML. CSS hovers are fast, simple, and use little bandwidth.

A lot of sites are switching from rollovers to text links. Using CSS, you can style links to look like those buttons you love. CNN.com [cnn.com] does this with their navigation bar on the left.

W3Schools has a a demo [w3schools.com] of CSS hover affects with example code.