Member Avatar for veledrom

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
  • 79 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by veledrom

Recommended Answers

All 3 Replies

Member Avatar for DangerDev

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

Member Avatar for aravelli

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)';
	}
}
Member Avatar for veledrom

I have used <div> instead of <img> in big cell then solved.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.