Hello all,<br />
<br />
I want to make my table cell's background dynamic so that whenever a user slides over a cell, that individual cell will change it's background color. I'm doing this to make the site more visual.<br />
Now, is there a way to do this with CSS? I'd rather take this approach but I can't think of a way to do it this way.<br />
The other way I can think of doing this is through using the attribute 'onMouseOver' and 'onMouseOut' and with some javascript code. The only thing is, I don't think javascript document object has members other than image and form.<br />
I've done this using images and swapping but I'm trying to avoid this method at all cost. Does anyone know a simpler way to accomplish this task?<!--content-->Here's a simple JavaScript that should do it. Add these two attributes to every <td> tag you want to change background color. Please edit italic text to background colors you want to use.<br />
<br />
onMouseOver="event.srcElement.style.backgroundColor='hover background color';"<br />
<br />
onMouseOut="event.srcElement.style.backgroundColor='normal background color';"<br />
<br />
(I had to edit it a little, here's the version that works!)<!--content-->BTW, it works in Internet Explorer, I don't know about other browsers. Please remember to save all characters that aren't italic, such as apostrophes.<!--content-->Agent002,<br />
<br />
The code you provided worked for IE like you said. It didn't work in Mozilla so I took a look at the other topic and found this to be a better solution.<br />
<td style="background-color:green" onMouseover="this.style.backgroundColor='blue'" onMouseout="this.style.backgroundColor='green'"><br />
Thanks to COBOLDinosaur, I can now move on with working on my webpage. Agent, thanks for the help. I appreciate it.<!--content-->It was quite stupid of me to not use "this" instead of "event.srcElement", since it does the same thing but it apparently works in more browsers. I'll have to remember that.<!--content-->
<br />
I want to make my table cell's background dynamic so that whenever a user slides over a cell, that individual cell will change it's background color. I'm doing this to make the site more visual.<br />
Now, is there a way to do this with CSS? I'd rather take this approach but I can't think of a way to do it this way.<br />
The other way I can think of doing this is through using the attribute 'onMouseOver' and 'onMouseOut' and with some javascript code. The only thing is, I don't think javascript document object has members other than image and form.<br />
I've done this using images and swapping but I'm trying to avoid this method at all cost. Does anyone know a simpler way to accomplish this task?<!--content-->Here's a simple JavaScript that should do it. Add these two attributes to every <td> tag you want to change background color. Please edit italic text to background colors you want to use.<br />
<br />
onMouseOver="event.srcElement.style.backgroundColor='hover background color';"<br />
<br />
onMouseOut="event.srcElement.style.backgroundColor='normal background color';"<br />
<br />
(I had to edit it a little, here's the version that works!)<!--content-->BTW, it works in Internet Explorer, I don't know about other browsers. Please remember to save all characters that aren't italic, such as apostrophes.<!--content-->Agent002,<br />
<br />
The code you provided worked for IE like you said. It didn't work in Mozilla so I took a look at the other topic and found this to be a better solution.<br />
<td style="background-color:green" onMouseover="this.style.backgroundColor='blue'" onMouseout="this.style.backgroundColor='green'"><br />
Thanks to COBOLDinosaur, I can now move on with working on my webpage. Agent, thanks for the help. I appreciate it.<!--content-->It was quite stupid of me to not use "this" instead of "event.srcElement", since it does the same thing but it apparently works in more browsers. I'll have to remember that.<!--content-->