Image Selector using selection list - Source Code - JsMadeEasy.com

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Image Selector using selection list
A JavaScript image selector that uses a selection list to allow surfers to choose among many images to be displayed in one fixed area.



Insert into <HEAD>
<script language="javascript"> <!-- Image Selector // Cameron Gregory - cameron@bloke.com // http://www.bloke.com // http://www.bloke.com/javascript/Selector/ // // ChangeLog // // Wed Jul 10 11:29:51 EDT 1996 // Added -1 check on array // Wed Jul 10 06:25:30 EDT 1996 // merged pulldown and selector into one. // // Wed Jul 10 06:03:05 EDT 1996 // 3.0b5a hosed something! Stopped using Image objects // and just stored in array. // // Usage: // Selector(width,height,images) // SelectorLong(width,height,boxHeight,images) // SelectorLongNames(width,height,boxHeight,images,names) // PullDownSelector(width,height,images) // PullDownSelectorNames(width,height,images,names) // // width, height is image size (-1,-1) if you don't want to specify // boxHeight is the height of the select box // images is space or comma separated file list // names is corresponding name array (comma separated) function selectImage(f) { if (document.flipForm.which.selectedIndex >= 0) document.flipForm.flip.src = imageSet[document.flipForm.which.selectedIndex]; } function SelectorLongNames(width,height,listHeight,images,names) { /* si: start index i: current index ei: end index ** cc: current count */ si = 0; ci=0; cc=0; imageSet = new Array(); ei = images.length; for (i=1;i<ei;i++) { if (images.charAt(i) == ' ' \|\| images.charAt(i) == ',') { imageSet[cc] = images.substring(si,i); cc++; si=i+1; } } currentFlip = 0; si = 0; ci=0; cc=0; nameSet = new Array(); ei = names.length; for (i=1;i<ei;i++) { if (names.charAt(i) == ',') { nameSet[cc] = names.substring(si,i); cc++; si=i+1; } } currentFlip = 0; // should check nameSet.length == imageSet.length document.writeln("<FORM name=flipForm>"); document.writeln("<table border=0><tr><td>"); document.write("<img name='flip'"); if (width >0) document.write("width="+width); if (height >0) document.write(" height=" +height); document.writeln(" src=" +imageSet[0]+ ">"); document.writeln("</td><td>"); document.write("<Select"); if (listHeight > 0) document.write(" size="+listHeight); document.write(" name='which' onChange='selectImage(this.form)'>"); for (i=0;i<imageSet.length;i++) if (i<nameSet.length) document.write("<OPTION value="+i+">"+nameSet[i]); else document.write("<OPTION value="+i+">"+imageSet[i]); document.writeln("</SELECT>"); document.writeln("</FORM>"); document.writeln("</td></tr></table>"); } function SelectorLong(width,height,listHeight,images) { SelectorLongNames(width,height,listHeight,images,","); } function PullDownSelector(width,height,images) { SelectorLongNames(width,height,-1,images,",") } function PullDownSelectorNames(width,height,images,names) { SelectorLongNames(width,height,-1,images,names) } // use -1 -1 if you don't know the width and height for the image function Selector(width,height,images) { listHeight=5; SelectorLong(width,height,listHeight,images); } // End Script --> </script>

Insert into <BODY>
<script language="javascript"> Selector(152,136,"dog2-small.gif condo-view-small.gif hiking1-small.gif hiking2-small.gif malanda-small.gif snowball-small.gif snowcamping-small.gif spider1-small.gif spider3-small.gif "); </script>

Other Options
Configuring the script: To change the images to your own, you'll have to edit the code in step 2. The below lists it: <script language="javascript"> Selector(152,136,"dog2-small.gif condo-view-small.gif hiking1-small.gif hiking2-small.gif malanda-small.gif snowball-small.gif snowcamping-small.gif spider1-small.gif spider3-small.gif "); </script>