Entry
How can I script a mouseover/out/click handler for a table cell?
How can I script a mouseover/out/click handler for a table cell?
May 19th, 2000 16:35
Martin Honnen,
IE4/5 and NN6 simply allow to have those handlers for the TD element so
<TD ONMOUSEOVER="this.bgColor = 'lime';"
ONMOUSEOUT="this.bgColor = document.bgColor;"
ONCLICK="this.bgColor = 'red';
>
will do.
Of course you can also use javascript to assign such handlers
dynamically by first getting a handle to the TD element
var td = document.all ? document.all['cellID']
: document.getElementById('cellID');
and the assigning a function as the handler
td.onmouseout =
function (evt) {
this.bgColor = 'lime';
};
NN4 doesn't support event handlers for the TD element so you can't use
that direct approach with NN4. It is however for limited circumstances
possible to get event handling scripted for table elements in NN4 by
- positioning the TD elements relative which makes them scriptable
- positioning transparent Layers on top of the cells where event
handling gets set up for the Layers
Restrictions:
- cells need an id where naming convention is
'tableNameCell0_0'
where tableName can be freely choosen
- you need to count rows and cols and pass the values in
- <TD VALIGN="top"> is necessary for multi line cells
- the code breaks if the table gets a width attribute
- the layers on top of the cell let content shine through but
disable gui elements like links
Here is the code for NN4, the first two script blocks are necessary
(the first writes the styles as needed, the second is some code
library), the third is an example on how to set up mouseover/out
handlers for the cells of the included table:
<HTML>
<HEAD>
<SCRIPT>
if (document.layers)
document.write('<STYLE>TD.cell { position: relative; } <\/STYLE>');
</SCRIPT>
<SCRIPT>
function initTableLayers (tableName, rows, cols) {
if (document.layers) {
var maxHeight = new Array (rows);
var maxWidth = new Array (cols);
for (var r = 0; r < rows; r++)
maxHeight[r] = 0;
for (var c = 0; c < cols; c++)
maxWidth[c] = 0;
for (var r = 0; r < rows; r++)
for (var c = 0; c < cols; c++) {
var cell = document[tableName + 'Cell' + r + '_' + c];
if (maxHeight[r] < cell.clip.height)
maxHeight[r] = cell.clip.height;
}
for (var c = 0; c < cols; c++)
for (var r = 0; r < rows; r++) {
var cell = document[tableName + 'Cell' + r + '_' + c];
if (maxWidth[c] < cell.clip.width)
maxWidth[c] = cell.clip.width;
}
for (var r = 0; r < rows; r++)
for (var c = 0; c < cols; c++) {
var cell = document[tableName + 'Cell' + r + '_' + c];
cell.clip.width = maxWidth[c];
cell.clip.height = maxHeight[r];
cell.rowIndex = r; cell.colIndex = c;
var ol = cell.ol = new Layer(maxWidth[c]);
ol.cell = cell;
ol.clip.height = maxHeight[r];
ol.left = cell.pageX;
ol.top = cell.pageY;
ol.visibility = 'show';
}
}
}
function initTableEventHandler (tableName, rows, cols, event, handler) {
if (document.layers) {
var cell0_0 = document[tableName + 'Cell0_0'];
if (!cell0_0.ol)
initTableLayers (tableName, rows, cols);
for (var r = 0; r < rows; r++)
for (var c = 0; c < cols; c++) {
var cell = document[tableName + 'Cell' + r + '_' + c];
cell.ol['on' + event.toLowerCase()] = handler;
}
}
}
</SCRIPT>
<SCRIPT>
var highColor = 'lime'
function tdMouseOver (evt) {
this.cell.bgColor = highColor;
}
function tdMouseOut (evt) {
this.cell.bgColor = document.bgColor;
}
function init () {
initTableEventHandler ('table1', 3, 3, 'mouseover', tdMouseOver);
initTableEventHandler ('table1', 3, 3, 'mouseout', tdMouseOut);
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init();">
<TABLE BORDER="1">
<TR>
<TD ID="table1Cell0_0" CLASS="cell"
ONMOUSEOVER="this.bgColor = highColor;"
ONMOUSEOUT="this.bgColor = document.bgColor;"
>
Kibology
</TD>
<TD ID="table1Cell0_1" CLASS="cell"
ONMOUSEOVER="this.bgColor = highColor;"
ONMOUSEOUT="this.bgColor = document.bgColor;"
>
for
</TD>
<TD ID="table1Cell0_2" CLASS="cell"
ONMOUSEOVER="this.bgColor = highColor;"
ONMOUSEOUT="this.bgColor = document.bgColor;"
>
all
</TD>
</TR>
<TR>
<TD ID="table1Cell1_0" CLASS="cell"
ONMOUSEOVER="this.bgColor = highColor;"
ONMOUSEOUT="this.bgColor = document.bgColor;"
>
Kibology
</TD>
<TD ID="table1Cell1_1" CLASS="cell"
ONMOUSEOVER="this.bgColor = highColor;"
ONMOUSEOUT="this.bgColor = document.bgColor;"
>
for
</TD>
<TD ID="table1Cell1_2" CLASS="cell"
ONMOUSEOVER="this.bgColor = highColor;"
ONMOUSEOUT="this.bgColor = document.bgColor;"
>
all
</TD>
</TR>
<TR>
<TD ID="table1Cell2_0" CLASS="cell" VALIGN="top"
ONMOUSEOVER="this.bgColor = highColor;"
ONMOUSEOUT="this.bgColor = document.bgColor;"
>
Scriptology
</TD>
<TD ID="table1Cell2_1" CLASS="cell" VALIGN="top"
ONMOUSEOVER="this.bgColor = highColor;"
ONMOUSEOUT="this.bgColor = document.bgColor;"
>
for
</TD>
<TD ID="table1Cell2_2" CLASS="cell"
ONMOUSEOVER="this.bgColor = highColor;"
ONMOUSEOUT="this.bgColor = document.bgColor;"
>
all.
<BR>
All for Scriptology
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
