Solved

basic mouseover to change text color and text background color

Posted on 2006-06-21
13
561 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
  • 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
 

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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

759 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now