Need help with Javascript mouseover

Junior WebHelper Joined: 09 Sep 2003 Posts: 2

Need help with Javascript mouseover event here.

I just wondering if there is a cleaner way to write the following row highlight mouseover event

javascript code:

Code:

function highlight_on (thisobj,color)
{
thisobj.style.backgroundColor=color;
}

function highlight_off (thisobj,color)
{
thisobj.style.backgroundColor=color;
}

html file:

Code:

I really don't like to include all of those mouse event at each row. And if I decided to change the color of my whole site (Not just a page), there will be a lot of editing need to be done.

I know that I can write up a php function to generate the mouse event at one place, but still I have to include that php call at each row involve and end up generating the same code. I would consider this my very last option if possible.

So I just wondering if anyone know if there a way to write it so I don't have to include all of those mouse event and specify it outside the tr tag in one global place/function?

Here is what I come up with but still doesn't work perfectly, need help with Javascript guru here.

Include at javascript file above:

Code:

window.onload = function()
{
/* this is main fucntion to call on page load */
init_table_list ('listing');
/* init with table id = lisitng */
}

function init_table_list (tableid)
{
var tbid = document.getElementById(tableid);

tbid.onmouseover = function() {
highlight_on(this,'#EEF1FB')
}

tbid.onmouseout = function() {
highlight_off(this,'')
}
}

html file:

Code:

The problem with this is the whole table get highlighted. I'm having trouble to get to it's tr tag to trigger mouseover. This could be a simple problem if you really know javascript. I have to admit that I haven't write javascript that much to know how to fix this problem.

I also tried css hover. but it seems that css hover only work with a href= tag. So basiclly I tried to get the same result as I specify a:hover in one css file and include it at all page to have that mouseevent on every page and you only need to change it at one place if you need to.

So I try to do the same thing with this row highlight thing.
Any help is appreciated.

Thanks

Junior WebHelper Joined: 09 Sep 2003 Posts: 2

Additional comment:

The javascript above will work if I do the following:

Code:

But that is not what I want. It only highlight 1 row and specify a unique id for each row
is not a good idea.

I kind a want to specify an id at the parent and the mouseover will work on all of its tr children.

Posted: Wed Sep 10, 2003 4:51 pm (20 years, 7 months ago)

I don't know much about JavaScript, but if you put the colour into a variable then you'll be able to change it easier:

Code:

var colour="#EEF1FB";