Alternating table rows on mouse over?

I need some basic javascript help.

I have a table, and I have to have it when someone mouses over one of the cells in a row, the whole row changes background colors (or classes)




crap row1crap row1crap row1
crap row2crap row2crap row2

So when user puts their cursor over crap row 1, the whole row changes its class from alt1 to althover.

and when the user puts their cursor over crap row 2 the same thing happens.

Any ideas?

#303569

You would make it "td.alt1:hover { background: #FF0000; color: #FFFFFF; }"

No need for "althover"

#303572

but then... only that cell changes its background color, and not the whole row.

#303573

Problem fixed :P.

-NC

#303574

http://www.vladdy.net/Demos/IEPseudoClassesFix.html

Check out the demo at the bottom first to see if thats what you want.

I found that link here. It seems like they're discussing what you're looking for.

#303576

nightcrawler, it seems that might not work as planned what you told me on msn :(

#303578

response.write("")
if rs("Service")=true then
response.write("" & rs("ItemNumber") & "")
else
response.write("" & rs("ItemNumber") & "")
end if
response.write("")

Basically the js has to be put into this, I tried adding onmouseover="this.className='alt4'" onmouseout="this.className='alt1'" to the

Any ideas?

#303583

Well... there is no alt4...

Isn't it althover?

#303585

Well... there is no alt4...

Isn't it althover?

I changed it to alt4, anyway i get some ASP error, I think its cause of the double and single quotes.

#303587

I just n0*bified this times one million, but it works:

<html>



<head>

<title>EH?</title>

<style>

.header {

font: verdana;

font-size: 24px;

background-color: #000;

}

div.header:hover {

background-color: #005BC1;

color:#68AFFF;

border: 1px solid #003F86;

}

</style>

</head>



<body>



<table width="200">

<tr>

<td>

<div class="header">

<table>

<tr>

<td>cake</td>

<td>is</td>

<td>good</td>

</tr>

</table>

</div>

</td>

</tr>

</table>

</body>

Bad thing is, the whole DIV changes color when hovered. It could work with what you want, depending on how you're going to use it... that's the part I don't know about.

#303589

you don't need any javascript for this. it can be done wholly in css

just stick classes in the TR elements, and then in css, add :hover qualifiers to the ones you want to change, e.g.

tr.class { background-color: normal color; }

tr.class:hover { background-color: hover color; }

#303591

Ever hear of IE compatibility? Those damn guys at Redmond just HAD to break standards.

This way is far more safe, and guaranteed to work in more browsers.

-NC

P.S: I haven't tested it on IE, but hover usually only fully works on "a" elements, which it obviously was NOT designed wholly for.

#303592

nobody important uses IE, silly

#303606

nobody important uses IE, silly

I know I sound like I'm being an ass, but do you know how much of the business world is using IE?

If you're making a website for a client--even a small one-- you had better make damn sure that it looks alright in IE.

I hate that fact, but it's true :slant:.

-NC

#303609

i know, i know, IE is still around ~87% market share

i'm being facetious ;-P

I don't know why the W3C developed CSS2, it's basically worthless in major web design as IE supports about 0.01% of it... of course, I use it my design, because I could care less.

#303612

More like no one uses firefox.

You home consumers might think you're hot stuff using it, but goto the workplace most people use ie.

#303613

More like no one uses firefox.

You home consumers might think you're hot stuff using it, but goto the workplace most people use ie.

And THAT'S the problem!

Firefox appeals to people b/c of its features, and to web designers because it's (mostly) standards-compliant.

IE appeals to people because...well, because it comes bundled with Windows. I would stop caring if people used Internet Explorer IF it started supporting W3C standards...do you know many hours web coders "waste" adding fixes for IE bugs?

I know, I know. It's life, deal with it.

-NC

#303636

Well till you get on msn and fix my problem... you do have to deal with it :P.

#303642

This is what i use on my site. Works with IE & FireFox

-------------

<tr bgcolor="{cycle values="#eeeeee,#d0d0d0"}" onclick="java script:location = 'index.php?action=show_inc&id={$id}'" onmouseover="java script: this.style.backgroundColor='#3873b3'" onmouseout="java script: this.style.backgroundColor=''" style="cursor:pointer;">
<td></td>
<td></td>
...
</tr>

PS

There some {xxx} -> this is Smarty template... so just replace it with any value.

#303652

whats with the index.php stuff?

#303656

that won't work, just tried it. Doesn't like being in that asp crapola.

#303659

issue has been fixed just added an external script that wrote the

Works fine :)

Thanks for the help tho ladies.

#303666