Forum Moderators: open
Can't get this code to work in Firefox or Opera.
I am trying to swap a background image of a table cell.
Any help would be greatly appreciated.
<head>
<style type="text/css">
li { font-family: Arial; font-size:12px; margin-left:20; line-height:130%}
.boxstyle1 {background-image: url(images/boxes/buybox1a.jpg); text-decoration: none;}
.boxstyle2 {background-image: url(images/boxes/buybox2a.jpg); text-decoration: none;}
.boxstyle3 {background-image: url(images/boxes/buybox3a.jpg); text-decoration: none;}
</style>
<script type="text/javascript">
var backgs = new Array();
backgs[0] = "url(images/boxes/buybox1a.jpg)";
backgs[1] = "url(images/boxes/buybox1b.jpg)";
var backgstwo = new Array();
backgstwo[0] = "url(images/boxes/buybox2a.jpg)";
backgstwo[1] = "url(images/boxes/buybox2b.jpg)";
var backgsthree = new Array();
backgsthree[0] = "url(images/boxes/buybox3a.jpg)";
backgsthree[1] = "url(images/boxes/buybox3b.jpg)";
function changeImage(which){
newImage = backgs[which];
document.getElementById('boxstyle1').style.backgroundImage = newImage;
}
function changeImage1(which){
newImage = backgstwo[which];
document.getElementById('boxstyle2').style.backgroundImage = newImage;
}
function changeImage2(which){
newImage = backgsthree[which];
document.getElementById('boxstyle3').style.backgroundImage = newImage;
}
</script>
</head>
<body>
<td id="boxstyle1" class="boxstyle1" width="179" align="center" valign="top"><a onmouseover="javascript:changeImage(1)" onmouseout="javascript:changeImage(0)" onclick="document.location.href='http:shoppingcart';" >
<table border="0" width="166" id="table22" height="173" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center" height="123">
<table border="0" width="50%" id="table23" cellspacing="0" cellpadding="0">
<tr>
<td height="105"><br>
<img border="0" src="images/boxes/videobox.jpg" width="89" height="94"></td>
</tr>
<tr>
<td align="center" height="15">
<span class="classmain2">Flower DVD</span></td>
</tr>
<tr>
<td align="center"><span class="classmain2"><b>AUD $39.95</b></td>
</tr>
</table></a>
</td>
</tr>
<tr>
<td valign="top" align="center" height="22" width="173"> </td>
</tr>
</table>
</td>
I have used the following code to change the background image of a table cell. It works in IE6, Netscape7.1, FireFox2 and Opera9.
Hope it will help you,
<script language="JavaScript">
function setBackgroundImage (id, imageURL) {
if (document.layers)
document[id].background.src = imageURL == 'none'? null : imageURL;
else if (document.all)
document.all[id].style.backgroundImage = imageURL == 'none'? 'none'
: 'url(' + imageURL + ')';
else if (document.getElementById)
document.getElementById(id).style.backgroundImage = imageURL ==
'none'? 'none' : 'url(' + imageURL + ')';
}
function back(f)
{
setBackgroundImage('message',f);
return false;
}
</script>
<table>
<tr>
<td> </td>
<td>
<img src="abc.jpg" width="50" height="50" onClick="back(this.src);" onMouseOver="back(this.src)">
<img src="def.jpg" width="50" height="50" onClick="back(this.src);" onMouseOver="back(this.src)">
<img src="xyz.jpg" width="50" height="50" onClick="back(this.src);" onMouseOver="back(this.src)">
</td>
</tr>
<tr>
<td> </td>
<td id="message" width="50%" height="350"></td>
</tr>
</table>
Thanks for your help anyway
You can use this function in both onMouseOver and onMouseOut event. I think it will work for you. I have a code like the following, please check with two images named abc.jpg and def.jpg.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function setBackgroundImage (id, imageURL) {
if (document.layers)
document[id].background.src = imageURL == 'none'? null : imageURL;
else if (document.all)
document.all[id].style.backgroundImage = imageURL == 'none'? 'none'
: 'url(' + imageURL + ')';
else if (document.getElementById)
document.getElementById(id).style.backgroundImage = imageURL ==
'none'? 'none' : 'url(' + imageURL + ')';
}
function changeBack(f)
{
//alert("Hello");
setBackgroundImage('td1',f);
return false;
}
</script>
</head>
<body>
<table>
<tr>
<td background="abc.JPG" id="td1" onMouseOver="changeBack('def.jpg');" onMouseOut="changeBack('abc.jpg');" width="500" height="500">My name is Angsuman</td>
</tr>
</table>
</body>
</html>
