Changing the Font color with SPAN

Dev Shed Forums Sponsor:

May 29th, 2005, 10:50 PM

jimheng

Contributing User

Join Date: Feb 2004

Posts: 108

Time spent in forums: 15 h 26 m 50 sec
Reputation Power: 10

Changing the Font color with SPAN

Here I got a new problem about changing the font color when the mouse over some text.

The below codes work perfectly if only got 2 fonts which change each other when the mouse over them.

Code:

<span id="one" onMouseOver="document.getElementById('two').style.color='red'" onMouseOut="document.getElementById('two').style.color='black'">123</span>
<span id="two" onMouseOver="document.getElementById('one').style.color='red'" onMouseOut="document.getElementById('one').style.color='black'">abc</span>

Now, there had the third font called "abc123" and I want this font change color to red when the font "123" is over by mouse. Here is the code I cant image how to slove.

Code:

<span id="one" onMouseOver="document.getElementById('two').style.color='red'" onMouseOut="document.getElementById('two').style.color='black'">123</span>
<span id="two" onMouseOver="document.getElementById('one').style.color='red'" onMouseOut="document.getElementById('one').style.color='black'">abc</span>
<span id="two">abc123</span>

Description:
I need the word "abc" and "abc123" change to red color when the word "123" is over by mouse.

Anyone got a idea to do this?

__________________
Success is coming from your repeat failure
Berjaya Datang Dari Banyak Kali Gagal
失败是成功之母

I am welcome you visit my site.
http://www.jhmss.com

May 29th, 2005, 11:20 PM

jharnois

mod_dev_shed

Dev Shed God 20th Plane (14500 - 14999 posts)

Join Date: Sep 2002

Location: Atlanta, GA

Posts: 14,817

Time spent in forums: 1 Month 1 Week 4 Days 7 h 14 m 56 sec
Reputation Power: 1098

You cannot have two identical ids; that defeats the purpose. If you give the abc123 <span> its own id, like "three", then you can getElementById('three') in the same onMouseOver that you do for 'two'.

BTW, there is a keyword called "this" that refers to the current element:

Code:

<span id="one" onmouseover="this.style.color='red';">123</span>

__________________
# Jeremy

Explain your problem instead of asking how to do what you decided was the solution.

May 29th, 2005, 11:36 PM

jimheng

Contributing User

Join Date: Feb 2004

Posts: 108

Time spent in forums: 15 h 26 m 50 sec
Reputation Power: 10

Is there no any way to do this?

Or can I change the text into the INPUT type.
Then use the form tag to change the style?

Can this function well?
Thanks ur comments.

May 30th, 2005, 12:07 PM

jharnois

mod_dev_shed

Join Date: Sep 2002

Location: Atlanta, GA

Posts: 14,817

Time spent in forums: 1 Month 1 Week 4 Days 7 h 14 m 56 sec
Reputation Power: 1098

Quote:

Originally Posted by jimheng

Is there no any way to do this?

Quote:

Originally Posted by jharnois

If you give the abc123 <span> its own id, like "three", then you can getElementById('three') in the same onMouseOver that you do for 'two'.

Code:

<span id="one" onMouseOver="document.getElementById('two').style.color='red';document.getElementById('three').style.color='red';  " onMouseOut="document.getElementById('two').style.color='black';document.getElementById('three').style.color='bla  ck';">123</span>
<span id="two" onMouseOver="document.getElementById('one').style.color='red'" onMouseOut="document.getElementById('one').style.color='black'">abc</span>
<span id="three">abc123</span>

Changing the Font color with SPAN

Developer Shed Advertisers and Affiliates