Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

basic mouseover to change text color and text background color

Posted on 2006-06-21
13
Medium Priority
?
584 Views
Last Modified: 2010-04-06
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
0
Comment
Question by:billyboy71
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
  • +1
13 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 16953188
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
 
LVL 30

Expert Comment

by:callrs
ID: 16953583
<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
 

Author Comment

by:billyboy71
ID: 16954301
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:billyboy71
ID: 16954821
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
 
LVL 30

Expert Comment

by:callrs
ID: 16954991
<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
 
LVL 30

Expert Comment

by:callrs
ID: 16955027
<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
 
LVL 30

Expert Comment

by:callrs
ID: 16955631
<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
 
LVL 36

Expert Comment

by:Zyloch
ID: 16956186
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
 
LVL 5

Expert Comment

by:GENTP
ID: 16959657
Have you considered just using CSS?
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 16962137
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
 

Author Comment

by:billyboy71
ID: 16965703
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
 
LVL 30

Accepted Solution

by:
callrs earned 500 total points
ID: 16966201
<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
 

Author Comment

by:billyboy71
ID: 16966417
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn how to count occurrences of each item in an array.

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question