rollover link changes to alternate text - HOW????

[liquidmonkey]

hi, i'm using DREAMWEAVER CS3 and CSS to try and create a link rollover.
its simple so far but i would like the actual TEXT to change when the rollover occurs.

example, when the mouse goes over the word 'LINK' then the words 'CLICK ME' appear.

is this even possible using CSS?
any ideas would be greatly appreciated

[Daeva]

Hmmm. There MAY be a way, but it certainly won't be cross-browser compatible. On your pseudo class, :hover, try the content: "test"; css property. Your best bet for this working is FF 3.0+. Typically, you use this in this way:

P.mainP:before {
  content: "-";
}

Something like this would put a hyphen before all p tags with a class of mainP. Not sure if it works on a tags, or on any other pseudo class other than before or after.

IE does NOT interperet before or after pseudo elements.

Alternatively, you can make the text an image (not a best practice for SEO) like this:

...in the css somewhere...
a {
  background-image: url('images/linkOffText.gif');
  background-repeat: no-repeat;
  display: block;
  max-width: 100px;
  width: 100%;
  min-width: 80px;
}
a:hover {
  background-image: url('images/linkOnText.gif');
}
...your html code...
<a href="myUrl.html">&nbsp;</a>

Your best bet to get this done though is javascript.

<a href="myUrl.html" onmouseover="this.innerText='Click Me';" onmouseout="this.innerText='My Link';">My Link</a>

Hope this helps.

[liquidmonkey]

AWESOME answer!!! thank so much!!
i'm sort of new to the whole webpage thing so any tips like this are appreciated

i decided to not do this with CSS as its too much, especially with the javascript being one line and easy to understand.
the only thing is that it works in IE but NOT in firefox

have looked around a bit but can't seem to find a solution for this bug and it just makes me wish even harder that they (IE, FF, S, O) would all get together and stick to WEB STANDARDS!!!!!
hate it when some things work in some browsers and not in others

any clues for a firefox solution? off to bed and will continue trying tomorrow

[Daeva]

You can also try this:

<a href="mylink.html" onmouseover="this.innerHTML='Click Here';" onmouseout="this.innerHTML='My Link';">My Link</a>

[liquidmonkey]

wooooooooooooooohooooooooooooooo, AWESOME!!
THANK YOU!!

ok, not trying to push my luck, but do you know how to get rid of or prevent that 'ghost box' around your link from appearing after you click it?

if not, cool, you've helped out heaps already

[Daeva]

If I understand correctly what you're referring to, then there is a "workaround", but there is no way to get rid of it. That box is part of the web-browser's interface. It shows which item on the web-page has focus.
In order to remove it, you have to change focus to something else on the page.
So, your full link would be:

<a href="myUrl.html" onmouseover="this.innerHTML='Click Me';" onmouseout="this.innerHTML='My Link';" onclick="document.getElementById('IDofElementToSwitchTo').focus();">My Link</a>

the other option is to set the onclick attribute equal to: onclick="this.blur();" but this method can produce unpredictable results (for example, selecting the next link on the page).

That should do it for you.

I appreciate the thanks, helping is the whole point of this forum but it is nice to be thanked.