Closed Thread Icon

Preserved Topic: this.bgColor='#000000' (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=21648" title="Pages that link to Preserved Topic: this.bgColor=&amp;#039;#000000&amp;#039; (Page 1 of 1)" rel="nofollow" >Preserved Topic: this.bgColor=&#039;#000000&#039; <span class="small">(Page 1 of 1)</span>\

 
EDDII
Nervous Wreck (II) Inmate

From:
Insane since: May 2004

posted posted 05-03-2004 20:52

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?

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted posted 05-03-2004 22:32

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

code:
<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 :

code:
<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)

Tester123
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Jun 2004

posted posted 06-09-2004 17:28

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)

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 06-09-2004 18:15

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).

Virbatem
Nervous Wreck (II) Inmate

From: Perth Western Australia
Insane since: May 2004

posted posted 06-09-2004 19:06
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

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

posted posted 06-09-2004 19:14

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:

code:
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

Iron Wallaby
Nervous Wreck (II) Inmate

From: USA
Insane since: May 2004

posted posted 06-09-2004 19:20

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

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

posted posted 06-09-2004 19:34

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

code:
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.

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted posted 06-09-2004 19:38
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 ) :

code:
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)

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

posted posted 06-09-2004 19:47

Aaaah I see - thanks for that, poi!

Tester123
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Jun 2004

posted posted 06-10-2004 03:14

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

« BackwardsOnwards »

Show Forum Drop Down Menu