Martin,
I'm guessing that you have enough image tags to handle all the images of a particular category.
I would try this:
(1) have a global javascript variable that is an array. Call it 'imageTags' or something. In the BODY tag's onload event, collect the page's image tags by: imageTags = document.getElementsByTagName("IMG"); (I don't know if getElementsByTagName(...) is browser-specific, but it works in IE6... There are other ways to collect these anyway). You will also need (by this method) a global variable that holds the size of the maximum picture array.
(2) create arrays in javascript with the images you want displayed. For example:
var carPics = new Array("car1.bmp","jaguar.jpg","jalopy.gif");
var vacationPics = new Array("Greece.gif","TowerPisa.jpg","GrandCanyon.gif","GrandmasHouse.gif");
etc.
(3) set the onchange event of the drop-down list to something like: onchange='updatePictures(this.value);' ...making sure that the values of the options are the same names as the arrays in (2), above.
(4) create the javascript: function updatePictures(arrayName)
Here is a small sample code that works for me:
Code:
<html>
<head>
<script>
var imageTags;
var maxPics = 0;
var carPics = new Array("car1.bmp","jaguar.jpg","jalopy.gif");
var vacationPics = new Array("Greece.gif","TowerPisa.jpg","GrandCanyon.gif","GrandmasHouse.gif","Nic1.bmp");
function determineMaxPics()
{
for(var i=0; i<pictureChanger.length; i++)
{
var numPics = eval(pictureChanger[i].value).length;
if(numPics > maxPics)
maxPics = numPics;
}//end for
}//end determineMaxPics()
function updatePictures(arrayName)
{
var i=0;
var picArray = eval(arrayName);
for(; i<picArray.length; i++)
imageTags[i].src = picArray[i];
for(; i<maxPics; i++)
imageTags[i].src = ""; //empties trailing picture tags
}//end updatePictures(var)
</script>
<body onload='imageTags = document.getElementsByTagName("IMG");determineMaxPics();'>
<img name='image1' src=''><br />
<img name='image2' src=''><br />
<img name='image3' src=''><br />
<img name='image4' src=''><br />
<img name='image5' src=''><br />
<select name='pictureChanger' onchange='updatePictures(this.value);'>
<option value='carPics'>cars</option>
<option value='vacationPics'>vacation</option>
</select>
</body>
</html>
Of course, you get those #*(&@#$ little x's that tell you there is a picture missing, so if you have unequal lengths to your picture arrays, you may want to keep a little blank gif around to stick into the empties (to hide that blasted 'x'!).
'hope this helps.
--Dave
'hope this helps!
