E
Epetruk
Hi all,
I want a page where the contents of a table cell are replaced with an image
when the mouse moves over the cell, and the text is restored when the mouse
moves out. Here's the html for the page:
<HTML>
<HEAD>
<style type="text/css">
td.col1
{
background-color:Silver;
color:Black;
}
td.col3
{
background-color:Aqua;
color:Blue;
}
</style>
<script language="javascript">
function changeCellContents(cell, toPic)
{
if (toPic)
{
cell.innerHtml = "<img src=\"images/myimage.jpg\">";
}
else
{
cell.innerText = cell.CellText;
}
}
</script>
</HEAD>
<body>
<form name="TableDBForm">
<table bordercolor="White" border="0" cellspacing="1" width="100%">
<tr>
<td Class="col1" CellText="cell 1"
onMouseOver="changeCellContents(this, true)"
onMouseOut="changeCellContents(this, false)">cell 1</td>
<td Class="col1" CellText="cell 2"
onMouseOver="changeCellContents(this, true)"
onMouseOut="changeCellContents(this, false)">cell 2</td>
</tr>
</table>
</form>
</body>
</HTML>
Unfortunately, it doesn't seem to work. Any reason why?
I want a page where the contents of a table cell are replaced with an image
when the mouse moves over the cell, and the text is restored when the mouse
moves out. Here's the html for the page:
<HTML>
<HEAD>
<style type="text/css">
td.col1
{
background-color:Silver;
color:Black;
}
td.col3
{
background-color:Aqua;
color:Blue;
}
</style>
<script language="javascript">
function changeCellContents(cell, toPic)
{
if (toPic)
{
cell.innerHtml = "<img src=\"images/myimage.jpg\">";
}
else
{
cell.innerText = cell.CellText;
}
}
</script>
</HEAD>
<body>
<form name="TableDBForm">
<table bordercolor="White" border="0" cellspacing="1" width="100%">
<tr>
<td Class="col1" CellText="cell 1"
onMouseOver="changeCellContents(this, true)"
onMouseOut="changeCellContents(this, false)">cell 1</td>
<td Class="col1" CellText="cell 2"
onMouseOver="changeCellContents(this, true)"
onMouseOut="changeCellContents(this, false)">cell 2</td>
</tr>
</table>
</form>
</body>
</HTML>
Unfortunately, it doesn't seem to work. Any reason why?