image selector modifications

**mutedgirl** · 04-01-2005, 12:43 AM

The script I'm referring to is here: http://www.dynamicdrive.com/dynamici...geselector.htm

Is there a way to modify this to use text links or thumbnails instead of the 'select' box? What I'm looking for is similar to the thumbnail viewer II (http://www.dynamicdrive.com/dynamici...thumbnail2.htm) but I need the text caption under the larger image.

If you can help, thank you!

**jscheuer1** · 04-01-2005, 06:50 PM

Yes, but it no longer works on NS below version 6.

Code:

<html><title>Selects Demo</title><head><style>p.sel{cursor:pointer;cursor:hand;}</style></head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="178">
<tr>
<td width="35%" valign="top" align="left">

<p class="sel" id="http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg" onClick="generateimage(this.id,'0')">DHTML Guide</p>
<p class="sel" id="http://images.amazon.com/images/P/0201353415.01.TZZZZZZZ.jpg" onClick="generateimage(this.id,'1')">DHTML QuickStart</p>
<p class="sel" id="http://images.amazon.com/images/P/1556225865.01.TZZZZZZZ.jpg" onClick="generateimage(this.id,'2')">HTML4</p>
<p class="sel" id="http://images.amazon.com/images/P/1861001746.01.TZZZZZZZ.jpg" onClick="generateimage(this.id,'3')">IE5 DHTML</p>
</td>
<td width="65%" valign="top" align="left"><div id="dynamic3"><center><img src="http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg"><br><br>DHTML: The Definitive Guide</center></div></td>
</tr>
</table>
<script>
//Dynamic Image selector Script- © Dynamic Drive (www.dynamicdrive.com)
//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
if (ie4||ns6)
var contentobj=document.getElementById? document.getElementById("dynamic3"): document.all.dynamic3
function generateimage(which,desc){
if (ie4||ns6){
contentobj.innerHTML='<center>Loading image...</center>'
contentobj.innerHTML='<center><img src="'+which+'"><br><br>'+description[desc]+'</center>'
}
else
alert('You need NS 6+ or IE 4+ to view the images!')
}
</script></body></html>

Works pretty much like the original, image tags may be used instead of paragraphs. You have to configure the starting image and description in the HTML part, or leave the division tag empty for a blank start. If you use images, change the p in the style section to img.

**mutedgirl** · 04-02-2005, 04:02 AM

oh my goodness- THANK YOU! That worked perfectly on the first try

That's exactly what I was looking for. I'll let you know if I have any problems with it when I go to implement it, but so far it's just what I needed. Thanks!

Thread: image selector modifications

Thread Tools

Search Thread

image selector modifications

Bookmarks

Bookmarks

Posting Permissions