Solved

basic mouseover to change text color and text background color

Posted on 2006-06-21
13
570 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
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!

 

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 125 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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

Suggested Solutions

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
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 learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

730 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