basic mouseover to change text color and text background color

Hi,

I am trying to write a very basic mouseover and mouseout script from scratch to change the color of the text and the background color of the text.

I have written it as follows:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html">
</head>
<script language="JavaScript" type="text/JavaScript">
function onMouseOver()
 {
  document.text.color= blue
}

function onMouseOut()
 {
   document.text.color=green
}
</script>
<body>
<table>
<tr>
<td onMouseOver=(this) onMouseOut=(this)>test</td></tr>
</table>
</body>
</html>

However , my problem is that it doesn't work.  Can someone tell me the right way to code this?

Thanks.

Peter
billyboy71Asked:
Who is Participating?
 
callrsConnect With a Mentor Commented:
<head><script>function CT1(obj){obj.bgColor='#ffff66';}function CT2(obj){obj.bgColor='#66ff66';}</script></head>
<table><tr><td bgColor='red' onmouseover='CT1(this)' onmouseout='CT2(this)'>Cell 1</td><td>Cell 2</td></tr></table>
0
 
ZylochCommented:
Hi billyboy71,

Do you mean:

<td onmouseover="changeTextColor('blue');" onmouseout="changeTextColor('green');">test</td>

And then:

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

function changeTextColor(col)
{
    document.body.style.color = col;
}

//-->
</script>

in the <head> section

Regards,
Ted
0
 
callrsCommented:
<html>
<head>
<title>Color Change Test</title>
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<center><table>
<tr>
<td onmouseover=this.style.color='blue' onmouseout=this.style.color='red'>test</td></tr>
</table></center>
</body>
</html>
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
billyboy71Author Commented:
Your answer is pretty good callrs. But your code would increase the amount of text in my html document by quite a lot.

I need something like onmouseover(this) that points to a single function that can change text color and text background color of many words.

Thanks.

Peter
0
 
billyboy71Author Commented:
Your answer is pretty good also Zyloch .  But I was looking at something like that following.  But the following does not work.

<script language="JavaScript" type="text/JavaScript">
function changeTextColor()
{
    document.body.style.color = blue;
}
function changeTextColor2()
{
    document.body.style.color = red;
}
</script>
<body bgcolor="#669966">
<img src="test_dithering.gif" width="200" height="200">

<h3 onMouseOver=changeTextColor(this) onMouseOut=changeTextColor2(this)>A</h3>
0
 
callrsCommented:
<script language="JavaScript" type="text/JavaScript">
function C1(e)
{
    e.style.color = 'blue';
}
function C2(e)
{
    e.style.color = 'red';
}
</script>
<body>
<!--img src="test_dithering.gif" width="200" height="200"-->

<h3 onmouseover=C1(this) onmouseout=C2(this)>T e s t</h3>
0
 
callrsCommented:
<script type="text/JavaScript">
function C1(e){e.style.color = 'blue';}
function C2(e){e.style.color = 'red';}
</script>
<body bgcolor="#669966">
<img src="test_dithering.gif" width="200" height="200">
<h3 onmouseover=C1(this) onmouseout=C2(this)>A B C D E F G</h3>

Notes:
-onmouseover must be all small letters
-color names must be in quotes
-<script type="text/JavaScript"> is preferable: you don't need to use language="javascript" if you use type="text/javascript"
0
 
callrsCommented:
<script type="text/JavaScript">
var C1='blue'
var C2='red'
var C3='green'
function CFlip(e,whatcolor){e.style.color = whatcolor;}
</script>
<body bgcolor="#669966">
<img src="test_dithering.gif" width="200" height="200">
<h3 onmouseover=CFlip(this,C1) onmouseout=CFlip(this,C2)>A B C D E F G</h3>
<h3 onmouseover=CFlip(this,C3) onmouseout=CFlip(this,C1)>0 1 2 3 4 5 6 7</h3>


Flexibility: Now if you want different colors, just change the value of C1, C2, or C3.

: )

: )
0
 
ZylochCommented:
In case anyone wants this, just an extension of my original code:

<td onmouseover="changeTextColor(this, 'blue');" onmouseout="changeTextColor(this, 'green');">test</td>

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

function changeTextColor(obj, col)
{
    obj.style.color = col;
}

//-->
</script>
0
 
GENTPCommented:
Have you considered just using CSS?
0
 
ZylochCommented:
CSS would be a good way to go about things, although it loses its touch a bit since IE still doesn't support hover on anything other than <a> tags
0
 
billyboy71Author Commented:
Thanks for all of your guys' comments.  However, I would like to ask with Callrs's script, the function,

function C1(e){e.style.color = 'blue';}
function C2(e){e.style.color = 'red';}

How would the properties be written  if I wanted to change the cell background color of a table ??

Thanks

0
 
billyboy71Author Commented:
I would like to thank you everyone who participated in giving me answers.  They were all correct answers.  I wish I could have given points to you all.

There were some things to keep in mind when writing the script. For the following code

onmouseover=CFlip(this,C1)

I found that this event handler worked for changing the table cell color when I used quotation marks, onmouseover="CFlip(this.C1)".  However onmouseover=CFlip(this,C1) without quotes, works just fine to change the color in a style heading such as <h3></h3>.  But I think using the quotation marks is the best way because onmouseover="CFlip(this.C1)" works for changing the colors in the style heading <h3></h3> or for the background color of a table cell.

Hey, Thanks again guys!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.