Hi Guys,

I have completed a script that shows different images according to the choices in two select boxes. What i desperately want at this point is to have many instances of this effect happening on the same page, but since im referring to unique ID's this is not possible. Can anyone help me? i was hoping for a way to make the script call the current divs id and make all subsequent changes to the elements that sit inside this div.

I hope im making sense. here is the script:

Code:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>

<html>
  <head>
	<script type="text/javascript">

    function callAFunction(SelectBox)
    {
        var caption=[
            'Default Image Caption',
            'Caption1',
            'Caption2',
            'Caption3',
            'Caption4',
            'Caption5',
            'Caption6',
            'Caption7',
            'Caption8',
            'Caption9'],
        bp='images/',
        imgnum=8,
        thumb=document.getElementById('thumb'),
        description=document.getElementById('caption');
        thumb.src=bp+''+colour.name+shape.value+colour.value+'.jpg';
        description.innerHTML=caption[SelectBox.value];
    }

</script>
  </head>

  <body>
			<img src="triangularred.jpg" alt="" id="thumb" />

			<label>Change the colour: </label>
			<select id="colour" name="design1" onChange="callAFunction(this); return false;">
				<option value="pink">Pink</option>
				<option value="blue">Blue</option>
				<option value="red">Red</option>
				<option value="gold">Gold</option>
			</select><br />

			<label>Change the shape: </label>
			<select id="shape" onChange="callAFunction(this); return false;">
				<option value="triangular">Triangular</option>
				<option value="swallowtail">Swallowtail</option>
				<option value="chevron">Chevron</option>
			</select>
		</div>
		
		<div class="bunting">
			<div class="header">
			</div>
		
			<img src="triangularred.jpg" alt="" id="thumb" />

			<label>Change the colour: </label>
			<select id="colour" name="design2" onChange="callAFunction(this); return false;">
				<option value="pink">Pink</option>
				<option value="blue">Blue</option>
				<option value="red">Red</option>
				<option value="gold">Gold</option>
			</select><br />

			<label>Change the shape: </label>
			<select id="shape" onChange="callAFunction(this); return false;">
				<option value="triangular">Triangular</option>
				<option value="swallowtail">Swallowtail</option>
				<option value="chevron">Chevron</option>
			</select>
  </body>


</HTML>
Thanks in advance for any help!