?
Solved

basic mouseover to change text color and text background color

Posted on 2006-06-21
13
Medium Priority
?
580 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
It's sometimes a bit tricky to use date functions in Oracle BPEL. I'll explain quickly how you can add N days to the current date. In a BPEL process this can be useful, and you can adapt it to fit your needs. First of all, let's see how to add 1 …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

752 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