Mammamia
07-23-2002, 08:32 PM
I want to change the background of the TD when you move your mouse over, and then back to its orginal color on mouseout, which I do (and have to do) by switching the class of the TD.
This works fine, but the trouble comes when I want to have the class switch onclick. I tried setting a variable refelcting the ID name when clicked, and setting the css class to the TD clicked. Fine...but I also need to set the previously clicked TD back to its original class and that's my problem - it doesn't go back to its original class until you mouseover it again.
I may going about this the wrong way, but what I need to do is:
1. Switch the class name of the TD on mouseover
2. Switch the class name back to the name of the TD on mouseout
3. Set a class to the TD onclick, and set it back to its original class when another TD is clicked.
My code:
<script language="javascript">
var blah='';
function movein(which){
which.className='resultrowActive';
document.body.style.cursor='hand';
}
function moveout(which){
if(blah=='')
which.className=which.name;
else{
which.className=which.name;
document.all.item(blah).className='resultrowActive';
}
document.body.style.cursor='auto';
}
function activate(which){
blah=which.id;
document.all.item(blah).className='resultrowActive';
document.body.style.cursor='hand';
}
</script>
..the HTML
........
<tr>
<td class="resultrow01" name="resultrow01" id="1" onmouseover="movein(this)" onmouseout="moveout(this)" onclick="activate(this)">
01. <a class="nav" href="#">This is a task which needs attention today!</a></td>
</tr>
<tr>
<td class="resultrow02" name="resultrow02" id="2" onmouseover="movein(this)" onmouseout="moveout(this)" onclick="activate(this)">
02. <a class="nav" href="#">Oh yeah, and this here needs to be done also, or else you want be able to jump to #3</a></td>
</tr>
<tr>
<td class="resultrow01" name="resultrow01" id="3" onmouseover="movein(this)" onmouseout="moveout(this)" onclick="activate(this)">
03. <a class="nav" href="#">Task number 4...or something</a></td>
</tr>
...etc
Thanks,
Matz
This works fine, but the trouble comes when I want to have the class switch onclick. I tried setting a variable refelcting the ID name when clicked, and setting the css class to the TD clicked. Fine...but I also need to set the previously clicked TD back to its original class and that's my problem - it doesn't go back to its original class until you mouseover it again.
I may going about this the wrong way, but what I need to do is:
1. Switch the class name of the TD on mouseover
2. Switch the class name back to the name of the TD on mouseout
3. Set a class to the TD onclick, and set it back to its original class when another TD is clicked.
My code:
<script language="javascript">
var blah='';
function movein(which){
which.className='resultrowActive';
document.body.style.cursor='hand';
}
function moveout(which){
if(blah=='')
which.className=which.name;
else{
which.className=which.name;
document.all.item(blah).className='resultrowActive';
}
document.body.style.cursor='auto';
}
function activate(which){
blah=which.id;
document.all.item(blah).className='resultrowActive';
document.body.style.cursor='hand';
}
</script>
..the HTML
........
<tr>
<td class="resultrow01" name="resultrow01" id="1" onmouseover="movein(this)" onmouseout="moveout(this)" onclick="activate(this)">
01. <a class="nav" href="#">This is a task which needs attention today!</a></td>
</tr>
<tr>
<td class="resultrow02" name="resultrow02" id="2" onmouseover="movein(this)" onmouseout="moveout(this)" onclick="activate(this)">
02. <a class="nav" href="#">Oh yeah, and this here needs to be done also, or else you want be able to jump to #3</a></td>
</tr>
<tr>
<td class="resultrow01" name="resultrow01" id="3" onmouseover="movein(this)" onmouseout="moveout(this)" onclick="activate(this)">
03. <a class="nav" href="#">Task number 4...or something</a></td>
</tr>
...etc
Thanks,
Matz