...

View Full Version : changing CSS class in TD's on mouse events



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

caldasgsm
07-23-2002, 10:45 PM
function activate(which){
//first if blah is associated(with the old cell) reset it
if(blah)
{
document.all.item(blah).className='';
}
//then we hold the current id for the next time
blah=which.id;
//and affect the current cell
document.all.item(blah).className='resultrowActive';
document.body.style.cursor='hand';
}

this should work

Mammamia
07-23-2002, 11:34 PM
Aah...almost, thanks for pushing me in the right direction. I had to store the previous "class name" in a second variable, so I can rever the previously selected TD to its original class, as opposed to an empty string.

var blah='';
var blablah='';

function activate(which,name){
//first if blah is associated(with the old cell) reset it
if(blah)
{
document.all.item(blah).className=blablah;
}
blablah=which.name;
//then we hold the current id for the next time
blah=which.id;
//and affect the current cell
document.all.item(blah).className='resultrowActive';
document.body.style.cursor='hand';
alert('blablah = '+blablah);
alert('blah = ' +blah);
}

Yikes, if I told my programmer friend how long I've been working on this he'd pee in his pants :)

Thanks,
Matz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum