Entry
How to move a layer on top of a table row (IE only)?
How to move a layer on top of a table row (IE only)?
Feb 12th, 2000 07:22
Martin Honnen,
Table rows (TR) elements have a mouseover event handler and
offsetTop/Left/Width/Height
properties which allow to have a mouseover event for a complete row and
to move a layer on top of the row (though coordinates in the example
seem to be slightly off at the right):
<HTML>
<HEAD>
<SCRIPT>
function getOffsetLeft (el) {
var ol = el.offsetLeft;
while ((el = el.offsetParent) != null)
ol += el.offsetLeft;
return ol;
}
function getOffsetTop (el) {
var ot = el.offsetTop;
while ((el = el.offsetParent) != null)
ot += el.offsetTop;
return ot;
}
function hideRow (row) {
if (document.all) {
if (!document.all.rowCurtain) {
var html = '';
html += '<SPAN ID="rowCurtain"';
html += ' STYLE="position: absolute;';
html += ' background-color: black;';
html += '"';
html += '>';
html += '<\/SPAN>';
document.body.insertAdjacentHTML('beforeEnd', html);
}
var c = document.all.rowCurtain;
c.style.left = getOffsetLeft(row) + 'px';
c.style.top = getOffsetTop(row) + 'px';
c.style.width = row.offsetWidth + 'px';
c.style.height = row.offsetHeight + 'px';
c.style.visibility = 'visible';
}
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR ONMOUSEOVER="hideRow(this);">
<TD>
Kibology
</TD>
<TD>
for
</TD>
<TD>
all
</TD>
</TR>
<TR ONMOUSEOVER="hideRow(this);">
<TD>
Kibology
</TD>
<TD>
for
</TD>
<TD>
all
</TD>
</TR>
<TR ONMOUSEOVER="hideRow(this);">
<TD>
Scriptology
</TD>
<TD>
for
</TD>
<TD>
all.
<BR>
All for Scriptology
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Note that there are other and better ways to just hide a row but the
hiding layer is just an example here. The layer could have other
content. Important are the mouseover for the TR element and its
coordinates and dimensions.
