Joe,

Welcome to WebmasterWorld.

There is a thread on this subject, but I do not remember where except it is under the CSS forum. Check the forum library. I do recall it has to do with putting a <span> in the <a> and the span is hidden on a:link and visible on a:hover. It's something like this:
<a href="whatever">LINK<span>Alt Text</span></a>

You can even assign exact positioning to the <span> too.

Off the top of my head, I cannot recall more specifics. Hope this helps.

Marshall

Building on Marshall's solution:

<style>
.switchable .alt {display:none}
.switchable:hover .default {display:none}
.switchable:hover .alt {display:inline}
</style>
<a href="#" class="switchable"><span class="default">Default Text</span><span class="alt">Alternative Text</span></a>

The above is tested in Firefox 1.5. The <a href=""> is used because that's the only element which Internet Explorer supports the :hover psuedoclass for. If you want to remove the underline and the colour, just add this to your style section:

.switchable {color:black;text-decoration:none}

Thanks Marshall and vincevincevince!

I have been looking around this site - fantastic info out here I can't believe I didn't find you guys sooner! I'll take another look into the forum library as you suggested and also take a stab at the code with the suggestions you both gave.

I'll let you know what I find. Again - many thanks!

JoeVodkaSauce,

Glad to be of help.

vincevincevince,

Do you remember the thread I was talking about? It put the alt text for all the links in the same place, though your css works wonderfully. Anyway, I've been lookng for it, but finding the right search parameters can be a pain.

Marshall

It worked! Thanks so much vincevincevince for the code snippet and also Marshall for the span suggestion! That's exactly what I was looking for. I can't believe how simple it was - I've been using the span tags and hover or a ton of other items and never thought about the "display:none" . Thanks once again! Hopefully I'll be able to learn enough of this to contribute as well!

This is what I wound up using for my menu - obviously there's some extra styling I use for my layout. I am also sure that I am bloated with my code and need to learn how to clean it up. If you do come across that thread I'd love ot read it too. Thanks once again!

.switchableText {
font-family: Arial, sans-serif;
font-size: 12px;
text-transform: none;
color: #888785;
font-weight: 400;
text-indent: 10px;
line-height: 16px;
}
.switchableText .default {text-decoration: none; color: #888785;}
.switchableText .alt {display:none}
.switchableText:hover .default {display:none}
.switchableText:hover .alt {display:inline; text-decoration: underline; color: #234d9c;}

Without wishing to throw a spanner in the works ;) I think it's important to consider the accessibility aspects of this technique. If CSS is disabled, you will see simply the following:

Default TextAlternative Text

CSS is not really designed for this, you should either consider using Javascript to display the alternative text, or find a method which is semantically more comprehensible, at the very least separating the two versions of the link text - for example, two separate links, one positioned over the other.

if has a (tiny) downside with SEO as well, because the anchor text might not make much sense, or it might end up talking about two different things.
it is ingenious though

Hello all - thanks for the great advice - I actually thought life was great - tested on different versions of IE but Safari and FireFox have thrown in a monkey wrench. it seems that something in my CSS isn't playing nice non-IE browsers. Again - I'm a new one to CSS (about 3 weeks into it) so I haven't had the pleasure of experiencing all of these headaches. I'm done my homework for browser visitors to my site over the years and luckily 87%-ish are IE, 9% Safari and the rest Firefox and mixed but I still don't want to alienate anyone - especially new potential customers.

So - I think I'll play around with my stylesheet for a bit and if I can't find the issue then it's off to JavaScript.

Funny about the browsers and SEO - I figured CSS would be the most compatible and most SEO friendly choice - that's why I was staying away form images with hover and trying to use just text wherever possible. Shouldn't this be the case?

JoeVodkaSauce,

There are many points of view on image vs. text links and I am sure it will be a debate that will never end, kind of like table vs. tableless layout. Regardless, IMHO, text links are better than images on so many levels:

1) SEO,
2) Download time,
3) Images that fail to download/browsers with images turned off,
4) Images are not necessarily fluid,
5) Accessibility,
6) and text is not at all confusing.

Need I say more.

Marshall

Thanks for the info Marshall - I actually wound up changing over to a javascript text swap function. I couldn't get the safari and firefox browsers to see my text swap and also the formatting I wanted to achieve. this was very helpful though for me the css newbie and I will be using these boards a lot!

Thanks again!

--Joe

Update on my CSS Text vs. JS Text vs. JS ImageSwap for a category menu issue:

I've done my homework and built a nice little menu in JS which will swap text. It works great in all browsers. The kicker is this - I've done a lot "more" homework and am finding that having a JS based menu may be detrimental to one's customer base. Meaning if end users don't have JS enabled then they're stuck with nowhere to go. I'm posting this back in the CSS forum because after many hours of thinking, talking, and reading on-line CSS text menus seem to be the most failsafe way to go.

So my problem is that the CSS menu with the text swap works great in IE 7. In FireFox it swaps text but the underline is always present, in IE 6 it swaps but then sticks and won't swap back when the mouse is moved off and in Safari it doesn't swap at all and the underline is always present.

I know we're not supposed to post URL's in this site so I've tried to explain what's happening the best I can. I'm wondering if anyone could take a look at my CSS code and then my menu code and see if I'm doing something way wrong here. Or at least point me in a good starting direction. For this example I've changed one item in the menu, "Formaggio" which is supposed to swap to "Cheese" on mouse over.

Thanks in advance for any help!

CSS code:

.switchableText {
font-family: Arial, sans-serif;
font-size: 12px;
text-transform: none;
color: #888785;
font-weight: 400;
text-indent: 10px;
line-height: 16px;
}

.switchableText .default {text-decoration: none; color: #888785;}
.switchableText .alt {display:none}
.switchableText:hover .default {display:none}
.switchableText:hover .alt {display:inline; text-decoration: underline; color: #234d9c;}

HTML:

<tr>
<td colspan="3">
<a href="merchant.mvc?Screen=CTGY&Store_Code=CFF&Category_Code=cheese" class="switchableText"><span class="default">Formaggio</span><span class="alt">Cheese</span></a></td>
</tr>