0

Hi,

When the mouse is over the small image in a table cell, the large image appears in other cell. Code below works fine in IE but not in other browsers. How can solve this issue?

Thanks

<html>
<head>
<script language="javascript">
function changeBgImage(whichCell) {
	if (whichCell=="small_1") {
		document.getElementById("large").background="1l.gif";
	} else if (whichCell=="small_2") {
		document.getElementById("large").background="2l.gif";
	}
}
</script>
</head>

<body>
<table width="330" height="117" border="1">
  <tr>
    <td id="small_1" width="92" background="1s.gif" onMouseOver="changeBgImage(this.id);">&nbsp;</td>
    <td id="large" width="222" rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td id="small_2" background="2s.gif" onMouseOver="changeBgImage(this.id);">&nbsp;</td>
  </tr>
</table>
</body>
</html>
3
Contributors
3
Replies
4
Views
8 Years
Discussion Span
Last Post by veledrom
0

use an image element insied the bigger cell:

<td id="large" width="222" rowspan="2">&nbsp;<img id="img1" src=""/></td>

then set

document.getElementById("img1").src=image_fiele_name;

it will work

0

try this function .....

function changeBgImage(whichCell) {
	if (whichCell=="small_1") {
	document.getElementById('large').style.background='url(1l.gif)';
	} else if (whichCell=="small_2") {
	document.getElementById('large').style.background='url(1l.gif)';
	}
}
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.