Menu
Hello,
I have 2 tables on my page and want to add a rollover effect to the second one. See my html and css below. The problem is that at the moment the first table has a rollover effect, but I want it on the second. What did I wrong?
Thanks!
The html:
[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “DTD/xhtml1-transitional.dtd”>
<html>
<head>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript”>
<!–
var ss=0;
onload=function () {
var aTR=document.getElementsByTagName(‘tr’);
for (var i=0;i<aTR.length;i++) {
if (aTR[i].addEventListener) { // Mozilla
aTR[i].addEventListener(‘mouseover’, function() { highLight(this); }, false);
aTR[i].addEventListener(‘mouseout’, function() { highLight(this); }, false);
}
else {
aTR[i].onmouseover=function() {highLight(this);}
aTR[i].onmouseout=function() {highLight(this);}
}
}
}
function highLight(obj) {
if (obj.className != “hov”){
ss = obj.className;
obj.className = “hov”;
}
else{
obj.className=ss;
}
}
//–>
</script>
</head>
<body>
<div id =”filter”>
<table>
<tr><td>Test1</td><td><input type=”text” name=”t1″></td><td>sas</td><td>sas</td></tr>
<tr><td>Test1</td><td><input type=”text” name=”t1″></td><td>sas</td><td>sas</td></tr>
<tr><td>Test1</td><td><input type=”text” name=”t1″></td><td>sas</td><td>sas</td></tr>
</table>
</div>
<div id =”main”>
<table id=”sas”>
<tr><td>Main</td><td>demo</td><td>sas</td><td>sas</td></tr>
<tr><td>Main</td><td>demo</td><td>sas</td><td>sas</td></tr>
<tr><td>Main</td><td>demo</td><td>sas</td><td>sas</td></tr>
<tr><td>Main</td><td>demo</td><td>sas</td><td>sas</td></tr>
<tr><td>Main</td><td>demo</td><td>sas</td><td>sas</td></tr>
<tr><td>Main</td><td>demo</td><td>sas</td><td>sas</td></tr>
<tr><td>Main</td><td>demo</td><td>sas</td><td>sas</td></tr>
<tr><td>Main</td><td>demo</td><td>sas</td><td>sas</td></tr>
<tr><td>Main</td><td>demo</td><td>sas</td><td>sas</td></tr>
</table>
</div>
</body>
</html>
and my css is:
[code]
body {
margin:0px 0px 0px 0px;
padding:0px;
background:#ddd;
}
#filter {
width:350px;
background:#fff;
margin-left:auto;
margin-right:auto;
margin-top:50px;
}
#main {
width:550px;
background:#fff;
margin-left:auto;
margin-right:auto;
margin-top:10px;
}
table {
width:100%;
border:1px solid #aaa;
border-spacing: 0;
border-collapse: collapse;
}
td {
border:1px solid #aaa;
padding-left:2px;
}
table#sas td {
background:#DDF0BD;
}
.hov {
background:#DD10BD;
}