Go Back   Computer Forums > Web Design | Website Development > Web Programming
Click Here to Login
Join Computer forums Today


Reply
 
Thread Tools Search this Thread Display Modes
 
Old 05-11-2009, 12:51 PM   #1
In Runtime
 
liquidmonkey's Avatar
 
Join Date: Sep 2004
Posts: 183
Question rollover link changes to alternate text - HOW????

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
__________________

liquidmonkey is offline   Reply With Quote
Old 05-11-2009, 01:16 PM   #2
In Runtime
 
Daeva's Avatar
 
Join Date: Dec 2005
Posts: 407
Send a message via AIM to Daeva Send a message via MSN to Daeva Send a message via Yahoo to Daeva
Default Re: rollover link changes to alternate text - HOW????

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:
Code:
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:
Code:
...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.
Code:
<a href="myUrl.html" onmouseover="this.innerText='Click Me';" onmouseout="this.innerText='My Link';">My Link</a>
Hope this helps.
__________________

__________________
**Official Self-proclaimed glorified excessive (insert additional adjectives here) post editor/modifier.
Edit = Best feature ever
http://www.twitter.com/xDaevax
Daeva is offline   Reply With Quote
Old 05-11-2009, 05:37 PM   #3
In Runtime
 
liquidmonkey's Avatar
 
Join Date: Sep 2004
Posts: 183
Default Re: rollover link changes to alternate text - HOW????

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
liquidmonkey is offline   Reply With Quote
Old 05-11-2009, 06:45 PM   #4
In Runtime
 
Daeva's Avatar
 
Join Date: Dec 2005
Posts: 407
Send a message via AIM to Daeva Send a message via MSN to Daeva Send a message via Yahoo to Daeva
Default Re: rollover link changes to alternate text - HOW????

You can also try this:
Code:
<a href="mylink.html" onmouseover="this.innerHTML='Click Here';" onmouseout="this.innerHTML='My Link';">My Link</a>
__________________
**Official Self-proclaimed glorified excessive (insert additional adjectives here) post editor/modifier.
Edit = Best feature ever
http://www.twitter.com/xDaevax
Daeva is offline   Reply With Quote
Old 05-12-2009, 02:04 AM   #5
In Runtime
 
liquidmonkey's Avatar
 
Join Date: Sep 2004
Posts: 183
Default Re: rollover link changes to alternate text - HOW????

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
liquidmonkey is offline   Reply With Quote
Old 05-12-2009, 08:58 AM   #6
In Runtime
 
Daeva's Avatar
 
Join Date: Dec 2005
Posts: 407
Send a message via AIM to Daeva Send a message via MSN to Daeva Send a message via Yahoo to Daeva
Default Re: rollover link changes to alternate text - HOW????

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:
Code:
<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.
__________________

__________________
**Official Self-proclaimed glorified excessive (insert additional adjectives here) post editor/modifier.
Edit = Best feature ever
http://www.twitter.com/xDaevax
Daeva is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off



All times are GMT -5. The time now is 01:29 PM.


Powered by vBulletin® Version 3.8.8 Beta 4
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0