Preserved Topic: this.bgColor='#000000'

does anybody know how to set it so that when someone mousovers a table that bit of the table has a diferent background normally i would use onmousover="this.bgColor='#000000'" but i would not know how to set it up in a script can anyboy help?

EDII: Welcome in the Asylulm,
Well, if you take the JavaScript road, you should do :

<td onmouseover="this.style.backgroundColor="#000000"'  onmouseout="this.style.backgroundColor="#ffffff"'>lorem lipsum</td>

Otherwise, if you can take the CSS road ( at the cost of leaving aside IE and its lousy support of CSS ), you can simply do :

<style type="text/css">

td:hover

{

    background-color:#000000;

}

</style>

And avoid to add some unecessary JavaScript in your structural markup.

Cheers,



(Edited by poi on 05-03-2004 22:33)

hi there, Im new here.. :)

If I change the color of the current TD, I use: onmouseover="this.style.backgroundColor="#000000"
What about if I need to change the color of 2 TD(s) during
onmouseover on either 1 of them?

Example: <TD>Name</TD><TD>Email</TD>


Thanks for your help..

(Edited by Tester123 on 06-09-2004 17:29)

Then you will need to set up a function, most likely storing the id's of the td's in an array, and you would call that function with the relevant arguments in the onmouseover=".." bit.

The specifics of the function aren't something I can spit out off hand, but the concept is the same as doing multiple image rollovers, and should be easy enough to find (there was just a thread on the subject a day or two ago here).

quote:

---

poi said:

Otherwise, if you can take the CSS road ( at the cost of leaving aside IE and its lousy support of CSS ), you can simply do :

td:hover

---

I seem to recall, in a time long ago, IE having the hover attribute for anchors. Reading about it in pro-NS circles I found everyone proclaiming negativity towards it. I have no iead why. Maybe just because NS did not have it?

Now it seems IE is 'lacking' for not having hover. Go figure....


Not Enough Is Better Than Too Much

I thought this would be the perfect situation in which this.nextSibling and this.previousSibling would come in handy (as they allow you to avoid setting an ID for each and every single TD) and just came up with this function:

function changeRowColor(cell, color) {

	cell.style.backgroundColor = color;

	prev = cell.previousSibling;

	while (prev != null) {

		prev.style.backgroundColor = color;

		prev = prev.previousSibling;

	}

	next = cell.nextSibling;

	while (next != null) {

		next.style.backgroundColor = color;

		next = next.nextSibling;

	}

}

But while it works fine in IE 5+ and Opera, I for some reason can't get it to work in Mozilla/Firefox... any ideas as to what I'm doing wrong here anyone?

Link to example page:
http://kussatz.com/asylum/table_row_hover.html

Is it possible to grab the entire <tr> and background-color that?

"Any sufficiently advanced technology is indistinguishable from magic." -- Arthur C. Clarke
"Any sufficiently arcane magic is indistinguishable from technology." -- P. David Lebling

D'uh... of course! So much easier this way:

function changeRowColor(row, color) {

         row.style.backgroundColor = color;

}

And works in IE, Opera and Firefox, too.
http://kussatz.com/asylum/table_row_hover3.html

Good thinking, I.W.!

I'd still like to know why my previousSibling approach won't work in Mozilla if anybody has a clue, though.

quote:

---

Virbatem said:

Now it seems IE is 'lacking' for not having hover. Go figure....

---

the time have changed. Now, many web developpers preach for the use of web standards.

kuckus: Your function hungs because Mozilla interprets the \n and \t between the TD in the HTML markup as some TEXT elements. Thus if you alter your function that way, it works ( notice that I also change a bit the way you walk through all the TDs ) :

function changeRowColor( cell, color )

{

	currentNode = cell.parentNode.firstChild

	while( currentNode )

	{

		if( currentNode.nodeName == "TD" )

			currentNode.style.backgroundColor = color

		currentNode = currentNode.nextSibling

	}

}

But indeed, the suggestion of Iron Wallaby makes perfect sense.



(Edited by poi on 06-09-2004 19:43)

Aaaah I see - thanks for that, poi!

Thanks a lot! You guys are really nice and helpful :)