OK, I think I have managed it - an interesting challenge for today
You wanted an image in the last table cell that would appear on rollover and click and disappear when we roll out - is that right?
Follow these steps:
Add new css style to define "over" state for this last cell (modify the image path for your image:
- Code: Select all
.last_td_image{
background-image: url("../images/download.gif");
background-repeat: no-repeat;
background-position: right;
}
Add a new class name to the LAST td cell in your table (ie the cell where you want the image to appear) and give it a UNIQUE id eg:
- Code: Select all
<td style="padding-left:5px" id="last_td1" class="last_td_off">ccc</td>
(we DON't need to create a class within the styles for this "off" stage unless you want it to be different from the rest) - we use this class name to identify it in the js code.
Now modify the js code to detect these cells and modify with the new class.
Replace the function "highlightTableRow()" with this - you will notice the new lines at the end where we loop through the row cells to detect the ones with the "last_td_off" class:
- Code: Select all
function highlightTableRow()
{
var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;
if(this!=activeRow){
this.setAttribute('origCl',this.className);
this.origCl = this.className;
}
this.className = arrayOfRolloverClasses[tableObj.id];
activeRow = this;
// loop through cells to get last one
cells = activeRow.getElementsByTagName('TD');
for(var no=0;no<cells.length;no++){
if(cells[no].className=='last_td_off'){
this_cell=document.getElementById(cells[no].id);
this_cell.setAttribute((document.all ? 'className' : 'class'), 'last_td_image');
}
}
}
The replace the "resetRowStyle()" function with the following (similar additions to the previous function though with slight changes):
- Code: Select all
function resetRowStyle()
{
var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;
if(activeRowClickArray[tableObj.id] && this==activeRowClickArray[tableObj.id]){
this.className = arrayOfClickClasses[tableObj.id];
return;
}
var origCl = this.getAttribute('origCl');
if(!origCl)origCl = this.origCl;
this.className=origCl;
// loop through cells to get last one
cells = activeRow.getElementsByTagName('TD');
for(var no=0;no<cells.length;no++){
if(cells[no].className=='last_td_image'){
this_cell=document.getElementById(cells[no].id);
this_cell.setAttribute("class","last_td_off");
this_cell.setAttribute("className", "last_td_off"); //for IE
}
}
}
If this is not everything, it will pretty much send you on your way.
You can see a working demo based on your code (slightly simplified for working) here:
http://www.cbolson.com/tests/dhtml_tabl ... _image.php
I hope this will be of some help and that you can follow my instructions
Chris
