1 reply [Last post]
pithhelmet
Offline
newbie
Last seen: 16 years 23 weeks ago
Joined: 2004-02-26
Posts: 3
Points: 0

Hi Everyone -

I am trying to create a series of table entries (<td>)
that i would like to change the background color
if the user clicks inside of the TD.

Problem is now - i want a mouseover of the TD to change
the color as well, but NOT change the background
color that was there before the rollover - and still change the color
when the user clicks in the TD area.

any ideas would be appreciated.

thanks
tony

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Javascript event order

Hi pithhelmet,

window.onload=function(){ 
var thetable=document.getElementById("tableid"); 
var tds = thetable.getElementsByTagName("TD"); 
for( var x=0; x<tds.length; x++){ 
     tds[x].onclick=function(){ 
         this.style.backgroundColor="red"; 
    } 
    tds[x].onmouseover=function(){ 
        this.style.color="green"; 
    } 
    tds[x].onmouseout=function(){ 
        this.style.color="blue"; 
    } 
} 
}

This should get all the tds within the table tableid and when a user clicks the background color will change to red, and when hovering over the td the text color should change to green then blue when you move off.

Hope thats what you want, I haven't tested it Shock