CSS text rollovers (change the word on rollover)

Dev Shed Forums Sponsor:

February 2nd, 2004, 05:26 PM

jessterk

Junior Member

Join Date: Feb 2004

Location: Brooklyn, NY

Posts: 9

Time spent in forums: < 1 sec
Reputation Power: 0

CSS text rollovers (change the word on rollover)

I would like to create a text rollover that not only changes color but also changes the word being displayed. For example: the link on the screen would first appear to be red and would read "A". When rolled over, the link would turn black and the would read "ABOUT". I have read about transparencies and visibility, but am not sure how to impliment it. I want to keep the coding as simple as possible. Nothing is worse than too much code! Thanks.

February 2nd, 2004, 05:56 PM

mad_topher

Contributing User

Join Date: Dec 2003

Location: Milton Keynes, UK

Posts: 35

Time spent in forums: 5 h 43 m 57 sec
Reputation Power: 6

Place the text you want in the span section of the page and use IDs and event handlers for functions:

Code:

<span class='mouse_out' id='changeable_text' onMouseOver='show_text()' onMouseOut='hide_text()'>A</span>

Then you need the functions and styles defined in the head of the page:

Code:

<style type='text/css'>
<!--

.mouse_over {color: #000000;}
.mouse_out {color: #FF0000;}

-->
</style>

<script language='javascript' type='text/javascript'>
<!--

function show_text() {
  changeable_text.innerText = 'About';
  changeable_text.className = 'mouse_over';
}

function hide_text() {
  changeable_text.innerText = 'A';
  changeable_text.className = 'mouse_out';
}

-->
</script>

You can also add a style='cursor: hand' attribute to the span tag if you want it to look like a link... Hope that helps, it works in IE6 anyway.

February 2nd, 2004, 10:19 PM

jessterk

Junior Member

Join Date: Feb 2004

Location: Brooklyn, NY

Posts: 9

Time spent in forums: < 1 sec
Reputation Power: 0

Thanks! But I am having trouble using this script for changing more than one word on the page. How would I go about implementing this for multiple links?

February 3rd, 2004, 08:55 AM

mad_topher

Contributing User

Join Date: Dec 2003

Location: Milton Keynes, UK

Posts: 35

Time spent in forums: 5 h 43 m 57 sec
Reputation Power: 6

It depends on if you want exactly the same thing to happen, or if you want different text/ different coloured text displayed. If you wanted it the same, just repeat for all the links, if you wanted it for different text and CSS you could pass variables through the parentheses in the function:

Code:

<style type='text/css'>
<!--

.mouse_over {color: #000000;}
.mouse_out {color: #FF0000;}

-->
</style>

<script language='javascript' type='text/javascript'>
<!--

function show_text(text_value_over, css_class_over) {
  changeable_text.innerText = text_value_over;
  changeable_text.className = css_class_over;
}

function hide_text(text_value_out, css_class_out) {
  changeable_text.innerText = text_value_out;
  changeable_text.className = css_class_out;
}

-->
</script>

Then in the body add:

Code:

<span class='mouse_out' id='changeable_text' onMouseOver='show_text("About", "mouse_over")' onMouseOut='hide_text("A","mouse_out")'>A</span>

I haven't got time to test that right now, but as far as I can see that should work, then you can create different classes for different links and use them...

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: