real text over graphic nav button

Looking for the best way to put text over a graphic

[mdojet]

I am building a site where my nav buttons are a graphic. At first I had the text as part of the graphic that I made in photoshop. I was told that search engines can't index your pages easily if your text is part of the pic. So I want to put the button on the page and then put real text(link) over the button. On one half of the button is a picture of a dollar bill, the other half is maroon color. The button is bordered with a white stroke. What I tried is I had the cell where the button was going to go. But I split the cell so that the portion of the button that had the dollor on it was placed in the left side of the cell and the maroon color (this is where the text will be written on) was set as a background image on the cell on the right. My problem is alignment. I use Dreamweaver MX and if I adjust the cell just slightly, the portion of the image that is set as a background moves around where I dont want it.

My page mock up is located here: <snip>

The buttons on that page are part of the graphic which I want to avoid.

Any expert suggestions?

[edited by: Woz at 2:29 am (utc) on June 27, 2005]
[edit reason] No URLs please, see Tos#13 [/edit]

[Moby_Dim]

Welcome to WebmasterWorld.

search in Google something like : css flickerless image. Read #1 reference. Seems this one resolves link, text, and graphics compatibility problem.

Remove your URL, please - moderators do not like this ;)

[rocknbil]

<img src="yourimage.jpg" alt="This is my alt tag. When you mouse over the image, browsers will display this text and it can also be read by search engines.">

[tedster]

An approach that works well is to make your graphic the background-image for the anchor element, not for the table cell itself. Then you can also use a:hover to switch the background image for a roll-over effect that doesn't use javascript.

Check our CSS forum - literally hundreds of posts discussing various details of this approach. Often you need to change <a> to display:block and give the anchor element a width. When you get it working, it's a thing of beauty!

Note to rocknbil --
Only IE will display alt attribute text -- and that is a non-standard behavior that may not go forward in newer versions. For the more standards compliant browsers, you need to use a title attribute to get tool-tip text. And to date, search engines are not looking at title attributes because they are so rare at this point.

[BlobFisk]

<img src="yourimage.jpg" alt="This is my alt tag. When you mouse over the image, browsers will display this text and it can also be read by search engines.">

Semantically this is not quite true. The alt attribute tells assistive browsers what to say etc. with images - it is an alternative text to the image.

The title attribute technically is the mouseover image tooltip text, although most (if not all) browsers these days will tooltop alt text.