Change image with dropdown list?

JavaScript
1

Anyone know a link to some good plug and play code to accomplish this?

Basically I’d like to take a numerical value from a dropdown list and replace it as part of the imae path in the <img src> tag.

2

<script type=“text/javascript”>
function setImageSrc()
{
cID=document.forms[0].ColorID.options[document.forms[0].ColorID.selectedIndex].value
//document.forms[0].favorite.value=txt
var x=document.images
x[0].src=“images/ProductImage_”+cID+“.gif”
}
</script>
</head>

<body>
<img src=“compman.gif” width=“107” height=“98” />
<form>

<body>
<form>
Select your favorite color:
<select name=“ColorID” onchange=“setSrc()”>
<option value = “151”>Kelly Green</option>
<option value = “161”>Maroon</option>
<option value = “171”>Orange</option>
</select>
</form>

Combined a couple scripts from w3schools.com to do this.
Here’s my problem now - As far as I can tell - this just changes the first image embedded into the page I need it more targeted ( and to make matters worse, the image I need to swap out is a table background.

Possible?

3

Ok - I keep answering my own questions - I found this:

document.getElementById(shirtBack).style.background = “url(“images/ProductImage_”+cID+”.gif")";

Gave my table id=“shirtBack” and put that code in the setImageSrc() function.

Not working. What gives?

4

this may help


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--
// if you preload images they need to be loaded before they are required
// once in the cash they can be used as the original file name(&path) or as new Image.src ie SRC[1].src

ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
ImgPreloadAry=new Array('One.gif','Two.gif','Three.gif','Four.gif');
SRCAry=new Array();

for (i=0;i<ImgPreloadAry.length;i++){
 SRCAry[i]=new Image();
 SRCAry[i].src=ImgPath+ImgPreloadAry[i];
}

function Cng(sel){
 document.getElementById('img').src=ImgPath+sel.options[sel.selectedIndex].value;
 document.getElementById('tbl').style.backgroundImage='url('+(ImgPath+sel.options[sel.selectedIndex].value)+')';
}





//-->
</script>
</head>

<body>
<img id=img src="C:/WebJavaScript/OurJavaScripts/StdImages/Cross.gif" width="100" height="100">
<br>
<table id=tbl width="200" height="200" border="1">
  <tr>
    <td>.</td>
    <td>.</td>
  </tr>
  <tr>
    <td>.</td>
    <td>.</td>
  </tr>
</table>

<select name="Sel" size="1" onchange="Cng(this);" >
<option value="One.gif">One</option>
<option value="Two.gif">Two</option>
<option value="Three.gif">Three</option>
<option value="Four.gif">Four</option>
</select>
</body>

</html>

The '(this) ’ can be useful in saving code it could be this.id or this.value or whatever is applicable in this case it is the select object so you dont even need to give it a name.

I havent answered your question directly as you appear to like working things out your self(is good)

5

Thanks for your help!

I’m trying to do this in the simplest way possible, so I’m throwing out the ID for now and just trying to set a new backround image onChange, but even that’s not working.

A couple of questions:

Do I have to preload the images? There are a lot of them, so I’d rather not.

I’ve seen three references to the background:
style.background.src
style.background
and your style.backgroundImage

Which is/are correct?

I am testing this on Safari. What browser versions will getElementByID work with?

6