Metachecker.net
|
TrafficChecker.net
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
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>