PDA

Click to See Complete Forum and Search --> : How do I change a background image using javascript

Wicko3
11-08-2003, 11:07 AM
I want to use javascript to change the background image of a cell when the mouse moves over it, and return to normal when the mouse moves out.

I have found a code that changes the background colour, but the code doesn't work when I change the tag to the background image.

The code that changes the background colour of a cell is shown below for reference.

<table width=200>
<tr>
<td onMouseover="this.style.backgroundColor='yellow'" onMouseout="this.style.backgroundColor='white'">Menu item 1</td>
</tr>
<tr>
<td onMouseover="this.style.backgroundColor='yellow'" onMouseout="this.style.backgroundColor='white'">Menu item 2</td>
</tr>
</table>

Can anyone help me?

Thanks, from Wicko.
96turnerri
11-08-2003, 11:16 AM
<script language="JavaScript">

var backImage = new Array();

backImage[0] = "file:///C:/";
backImage[1] = "file:///C:/";
backImage[2] = "file:///C:/";
backImage[3] = "file:///C:/";

function changeBGImage(whichImage){
if (document.table){
document.table.background = backImage[whichImage];
}
}

</script>
<a href="javascript:changeBGImage(0)">Background 1</a>
<a href="javascript:changeBGImage(1)">Background 2</a>
<a href="javascript:changeBGImage(2)">Background 3</a>
<a href="javascript:changeBGImage(3)">No Background</a>
jochem
11-08-2003, 11:18 AM
This should do the trick:

<HTML>
<HEAD>
<style>
.Normal {background-color:#FF0000;}
.Highlight {background-color:#000000;}
</style>
</HEAD>
<BODY>
<p>
<table border="0">
<tr><td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">
<a href="Item_1.htm">Item 1</a></td></tr>
<tr><td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">
<a href="Item_2.htm">Item 2</a></td></tr>
<tr><td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">
<a href="Item_3.htm">Item 3</a></td></tr>
<tr><td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">
<a href="Item_4.htm">Item 4</a></td></tr>
<tr><td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">
<a href="Item_5.htm">Item 5</a></td></tr>
<tr><td class="Normal" onmouseover="this.className='Highlight'" onmouseout="this.className='Normal'">
<a href="Item_6.htm">Item 6</a></td></tr>
</table>
</p>
</BODY>
</HTML>
jochem
11-08-2003, 07:07 PM
To do the same with images, just change the <style> section to:

<style>
.Normal {background-image:url("folder/image1.gif");}
.Highlight {background-image:url("folder/image2.gif");}
</style>

Cheers, Jochem :cool:
jochem
11-08-2003, 07:12 PM
It is better not to use JavaScript, since some 13% of all users have JavaScript disabled!!! (see http://www.w3schools.com/browsers/browsers_stats.asp)
JPM
04-26-2009, 07:36 PM
Hi Guys i know this an old thread but I thought I'll post here anyway
This my code that works fine:

<html>
<head>
<title> RBtn Image Display</title>



<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?t=199296

var ImgArray = [
"images/matrix/matrix_blue_robot_rgb_show.jpg",
"images/matrix/matrix_red_robot_rgb_show.jpg",
"images/matrix/Business_Card_1.jpg"

];
function ChangeImg(imgPtr) {
document.getElementById('CommonImg').src = ImgArray[imgPtr];
// document.getElementById('CommonImg').alt = ImgArray[imgPtr]; // optional comment
}
</script>
</head>
<body onLoad="document.theform.imgControl[1].focus()">
<h1>Radio Button Image Display</h1>
Choose Image to Display<br>
<form name="theform">
<input type="radio" name="imgControl" id="0" value="0" onclick="ChangeImg(this.value)" > 1
<input type="radio" name="imgControl" id="1" value="1" onfocus="ChangeImg(this.value)" > 2
<input type="radio" name="imgControl" id="2" value="2" onclick="ChangeImg(this.value)"> 3
</form>

<p>
<img id="CommonImg" src="" alt="" height="" width="">
</body>
</html>

Now my Question is
how do I change

<img id="CommonImg" src="" alt="" height="" width="">

to something that looks something like this

<table id="CommonImg" style="background-image:url('+this.ChangeImg.src+');" width="756" height="239" >

I want the the table background image to change when radio button gets changed
Please give me some advise
Thanks