powderkeg1
Technical User
Hello All,
I got this script code from Dynamic Drive and followed the following
directions for it's use,
Simply add the below code where you wish the image selector to appear:
<form name="dynamicselector">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="178">
<tr>
<td width="35%" valign="top" align="left">
<select name="dynamicselector2" size="4"
onChange="generateimage(this.options[this.selectedIndex].value)">
<option
value="selected>DHTML Guide</option>
<option
value="QuickStart</option>
<option
value="option>
<option
value="DHTML</option>
</select>
</td>
<td width="65%" valign="top" align="left"><ilayer id="dynamic1" width=100%
height=178><layer id="dynamic2" width=100% height=178><div
id="dynamic3"></div></layer></ilayer></td>
</tr>
</table>
</form>
<script>
//Dynamic Image selector Script- ? Dynamic Drive (//For full source code, installation instructions,
//100's more DHTML scripts, visit dynamicdrive.com
//enter image descriptions ("" for blank)
var description=new Array()
description[0]="DHTML: The Definitive Guide"
description[1]="DHTML Visual QuickStart Guide"
description[2]="HTML 4 and DHTML"
description[3]="IE5 DHTML Reference"
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]+'</cent
er>'
}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write('<center><img
src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</cent
er>')
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>
The script is very easy to set up. First, change all the values inside the
<option> tags to reflect the paths to the images you want shown (you can add
or delete <option> tags, depending on how many images you have). Lastly,
change the height attribute of the <table> tag to reflect the height
required to accommodate the LARGEST image in your gallery (in the demo, 178
pixels).
but all I get is the code in the window pane, no form. what am I doing
wrong..? I entered the code, using dreamweaver4, in between the body tags just after a logo image, don't
see anything wrong there.
*My Version* (Just one example of an image link.)
<form name="dynamicselector">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="178">
<tr>
<td width="35%" valign="top" align="left">
<select name="dynamicselector2" size="4"
onChange="generateimage(this.options[this.selectedIndex].value)">
<option value=" selected>DHTML Guide</option>
<option
value="QuickStart</option>
<option
value="option>
<option
value="DHTML</option>
</select>
</td>
<td width="65%" valign="top" align="left"><ilayer id="dynamic1" width=100%
height=178><layer id="dynamic2" width=100% height=178><div
id="dynamic3"></div></layer></ilayer></td>
</tr>
</table>
</form>
<script>
//Dynamic Image selector Script- ? Dynamic Drive (//For full source code, installation instructions,
//100's more DHTML scripts, visit dynamicdrive.com
//enter image descriptions ("" for blank)
var description=new Array()
description[0]="DHTML: The Definitive Guide"
description[1]="DHTML Visual QuickStart Guide"
description[2]="HTML 4 and DHTML"
description[3]="IE5 DHTML Reference"
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]+'</cent
er>'
}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write('<center><img
src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</cent
er>')
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>
Any help/advice greatly appreciated. Cheers all.
powderkeg1...
I got this script code from Dynamic Drive and followed the following
directions for it's use,
Simply add the below code where you wish the image selector to appear:
<form name="dynamicselector">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="178">
<tr>
<td width="35%" valign="top" align="left">
<select name="dynamicselector2" size="4"
onChange="generateimage(this.options[this.selectedIndex].value)">
<option
value="selected>DHTML Guide</option>
<option
value="QuickStart</option>
<option
value="option>
<option
value="DHTML</option>
</select>
</td>
<td width="65%" valign="top" align="left"><ilayer id="dynamic1" width=100%
height=178><layer id="dynamic2" width=100% height=178><div
id="dynamic3"></div></layer></ilayer></td>
</tr>
</table>
</form>
<script>
//Dynamic Image selector Script- ? Dynamic Drive (//For full source code, installation instructions,
//100's more DHTML scripts, visit dynamicdrive.com
//enter image descriptions ("" for blank)
var description=new Array()
description[0]="DHTML: The Definitive Guide"
description[1]="DHTML Visual QuickStart Guide"
description[2]="HTML 4 and DHTML"
description[3]="IE5 DHTML Reference"
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]+'</cent
er>'
}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write('<center><img
src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</cent
er>')
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>
The script is very easy to set up. First, change all the values inside the
<option> tags to reflect the paths to the images you want shown (you can add
or delete <option> tags, depending on how many images you have). Lastly,
change the height attribute of the <table> tag to reflect the height
required to accommodate the LARGEST image in your gallery (in the demo, 178
pixels).
but all I get is the code in the window pane, no form. what am I doing
wrong..? I entered the code, using dreamweaver4, in between the body tags just after a logo image, don't
see anything wrong there.
*My Version* (Just one example of an image link.)
<form name="dynamicselector">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="178">
<tr>
<td width="35%" valign="top" align="left">
<select name="dynamicselector2" size="4"
onChange="generateimage(this.options[this.selectedIndex].value)">
<option value=" selected>DHTML Guide</option>
<option
value="QuickStart</option>
<option
value="option>
<option
value="DHTML</option>
</select>
</td>
<td width="65%" valign="top" align="left"><ilayer id="dynamic1" width=100%
height=178><layer id="dynamic2" width=100% height=178><div
id="dynamic3"></div></layer></ilayer></td>
</tr>
</table>
</form>
<script>
//Dynamic Image selector Script- ? Dynamic Drive (//For full source code, installation instructions,
//100's more DHTML scripts, visit dynamicdrive.com
//enter image descriptions ("" for blank)
var description=new Array()
description[0]="DHTML: The Definitive Guide"
description[1]="DHTML Visual QuickStart Guide"
description[2]="HTML 4 and DHTML"
description[3]="IE5 DHTML Reference"
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]+'</cent
er>'
}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write('<center><img
src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</cent
er>')
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>
Any help/advice greatly appreciated. Cheers all.
powderkeg1...