Any idea where I need to make changes for this to work?

[kslnor]

I have the following script (borrowed), but I - with little knowledge with this - do not know how to make the changes for this script to do what I want. This is what I want:

I would like the selection box to be within a <div> located on the right side of my page. I would like the image that changes to be located at the upper left of the page. As it is, the selector box is located at the left and the image is centered within the page. I have tried moving sections of the script, but I would up with no image and a large empty space below the selector box (and before the rest of the content within the <div>. Any suggestions? Thank you

<form name="dynamicselector">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="100">
<tr>
<td width="100%" valign="top" align="right">
<select name="dynamicselector2" size="2" onChange="generateimage(this.options[this.selectedIndex].value)">

<option value="http:../../images/acf175.jpg" selected>Tremont, Elevation A</option>
<option value="http:../../images/acf176.jpg">Tremont, Elevation B</option>
</select>

<br><br>
<a href="TGTremontfloorplanstest.shtml" class="bodycopyblack">View Tremont Floorplans</a>

</td>
<td width="65%" valign="top" align="left"><ilayer id="dynamic1" width=100% height=237><layer id="dynamic2" width=100% height=178><div id="dynamic3"></div></layer></ilayer></td>
</tr>
</table>
</form>

<script>

//enter image descriptions ("" for blank)
var description=new Array()
description[0]="top"
description[1]=""

var ie4=document.all
var ns6=document.getElementById
var tempobj=document.dynamicselector.dynamicselector2
if (ie4¦¦ns6)
var contentobj=document.getElementById? document.getElementById("dynamic3"): document.all.dynamic3
function generateimage(which){
if (ie4¦¦ns6){
contentobj.innerHTML='<center>Loading image...</center>'
contentobj.innerHTML='<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>'
}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write('<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>')
document.dynamic1.document.dynamic2.document.close()
}
else
alert('You need NS 4+ or IE 4+ to view the images!')
}

function generatedefault(){
generateimage(tempobj.options[tempobj.options.selectedIndex].value)
}

if (ie4¦¦ns6¦¦document.layers){
if (tempobj.options.selectedIndex!=-1){
if (ns6)
generatedefault()
else
window.onload=generatedefault
}
}

</script>

[rocknbil]

Two things right off, layers are old, OLD Netscape proprietary and will probably give you problems. Use <div> instead, which support the id reference. <center> is also deprecated, but still works. Second,

"http:../../images/acf175.jpg"

I've never seen this, at all, and would be surprised if it works. It's probably better to just use

"/images/acf175.jpg"

or

"../../images/acf175.jpg"

I'll go off and paste this in a doc, play with it, and will return, you have me curious - but Foitman will probably beat me to it. :-)

[rocknbil]

OK, here is a more modern solution I came up with. Not sure if it will work with a multiple select list like you had, but give it a go.

some notes:
- All modern browsers support getElementByID, if this does not exist it will not work. Browser ID is the worst method of scripting. Always look for the object you want to operate on, not make assumtions on what will work based on browser or version. So using this frame of mind we've eliminated most of the old code. Note that everything functions based on the "if (document.getElementById)"; If this does not exist, it alerts, 'Man, your browser is REALLY OLD'.

- added ID to select list, this allows you to reference it by ID

- Select lists should have blanks selected by default, hence populated the first element of description with ''. Also you will see the window.onload event uses the second item in the list for this reason.

- changed select list object name to selectObj, something that tells you a bit about the object instead of "tempobj" :-)

- I went with a regular select list instead of multi-selects, I'm more familiar with them and usually use other options for multi-selects - experiment :-)

- Both instances of writing to dynamic3 center the content. So just applying a style to dynamic3 eliminates the deprecated <center> tag.

- I hate to say it, but there's an easier way of doing this. Simply put an image in the table cell, give it an ID attribute, then onChange of the select list do document.imageID.src='the_new_image.jpg';

OK hope this is what works for you, and I learned a few things playing with it - we're even. :-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Dynamic pictures</title> 
</head> 
<body> 
<form name="dynamicselector"> 
<table border="0" width="100%" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="100%" valign="top" align="right"> 
<select name="dynamicselector2" id="dynamicselector2" 
onChange="generateimage(this.options[this.selectedIndex].value)"> 
<option value="">Select</option> 
<option value="acf175.jpg">Tremont, Elevation A</option> 
<option value="hacf176.jpg">Tremont, Elevation B</option> 
</select> 
<br><br> 
<a href="alert('Some URL');" class="bodycopyblack">View Tremont Floorplans</a> 
</td> 
<td valign="top" style="text-align:left;width:65%;"> 
 <div id="dynamic1" style="width:100%; height:237px;"> 
 <div id="dynamic2" style="width:100%; height:178px;"> 
 <div id="dynamic3" style="text-align:center;"> </div> 
</div> 
 </div> 
 </td> 
</tr> 
</table> 
</form> 
<script type="text/javascript"> 
//enter image descriptions ("" for blank) 
 var description=new Array('','top view','side view'); 
 if (document.getElementById) { 
 var selectObject=document.getElementById('dynamicselector2'); 
 var contentobj=document.getElementById('dynamic3'); 
 window.onload=generateimage(selectObject.options[1].value); 
 }  
function generateimage(which){ 
 if (document.getElementById) { 
 contentobj.innerHTML=' ...Loading image...'; 
 contentobj.innerHTML='<img src="'+which+'"><br><br>'+description[selectObject.options.selectedIndex]; 
} 
 else { alert('Man, your browser is REALLY OLD!'); } 
} 
</script>  
</body> 
</html> 

[kslnor]

Thanks Rocknbill! You ROCK!

So...I played around with this a bit, and realized how little I really know.I like having a selection box, but you mentioned an eaier way to do this? I'm all for easy ways to accomplish the same thing. Can I get your assistance further? I would really like to have a selection box in a container (<div id="selections"> for example) on the right side of the page. On the left side of the page is another container (<lets call it <div id="homes">) where I would like the selected images to appear. Like I said, I don't know much about this and I played around and could not get it. Please, please can you help? The simple way. Thank you!

[rocknbil]

You can move the form and image container anywhere you want as long as the id's and refereces to them are unique. But I would think having a select box and the image it references on different sides of the page would be more confusing than anything.

Anyway the complication here is your captions. If you don't have them, simplest to do is

<form name="dynamicselector"> 
<select name="dynamicselector2" id="dynamicselector2" 
onChange="document.myimg.src=this.options[this.selectedIndex].value;"> 
 <option value="">Select</option> 
 <option value="acf175.jpg">Tremont, Elevation A</option> 
 <option value="hacf176.jpg">Tremont, Elevation B</option> 
</select> 
 <br><br> 
 <img src="" name="myimg" id="myimg"> 
</form> 

Note there's no function, just assign the pic to the image in the onChange.

Back to a little more complex, if you want captions it doesn't hurt to add the width, height, and alt tags to the image too. Here's another way of going about it, not really better than the first other than it does it differently and adds the width and height, which as you can see can vary with this method. All the data for each image is stored in a colon-separated list in options, this really only makes sense with short captions.

<form name="dynamicselector"> 
<select name="dynamicselector2" id="dynamicselector2" 
onChange="generateimage(this.options[this.selectedIndex].value)"> 
 <option value="">Select</option> 
 <option value="acf175.jpg:250:150:top view">Tremont, Elevation A</option> 
 <option value="hacf176.jpg:100:75:side view">Tremont, Elevation B</option> 
</select> 
</form> 
<br> 
<div style="text-align:center;"> 
<img name="myimg" id="myimg" width="1" height="1" alt=""> 
<p style="margin:2px; padding:0;" id="caption"> </p> 
</div> 
<script type="text/javascript"> 
function generateimage(vals){ 
 if (document.getElementById) { 
 params = vals.split(':'); 
 contentobj=document.getElementById('caption'); 
 contentobj.innerHTML=(vals)?params[3]:''; 
 img = document.getElementById('myimg'); 
 img.src=(vals)?params[0]:''; 
 img.width=(vals)?params[1]:''; 
 img.height=(vals)?params[2]:''; 
 img.alt=(vals)?params[3]:''; 
 } 
 else { alert('Man, your browser is REALLY OLD!'); } 
} 
</script>