Events inside a Function?

[said_fox]

Hi,
Suppose the following function:

function colorIt(his)
{
his.style.color="red";
}

it seems to give the element color the red color.
ok.
Now I will place it inside a tag as follows:

<div onMouseover="colorIt(this)">The text to be colored into RED onMouseover</div>


The question is:
What can I add to this function to return the color back onMouseout?
I don't want to use onMouseout event handler inside the div Tag. Also I don't want to write another function.
Is this possible?

[gil davis]

If you don't want to use the mouseout, the only other thing you could do is a setTimeout() to change the color back.

Technically you could create a mouseout and assign it to the DIV inside the function but it would be assigned every time the function ran which would add unnecessary processor overhead.

Why would you not want to assign the mouseout to the DIV in the HTML, anyway? Are you just trying to save typing, or trying to be clever?

[David Harrison]

var temp;
var n=0;

function colorit(his){

if(n==0){
temp=his.style.color;
his.style.color="red";
n++;}

else{
his.style.color=temp;
n--;}

}

<div onmouseover="colorit(this)" onmouseout="colorit(this)">The text to be colored into RED onmouseover</div>

This method includes an onmouseout event handler for the div tag, simply because I can't think of any other way of doing it. Use this way if you want, or chase after the holy grail of mouseovers for a while, it's up to you.