DHTML Shock
Articles/Tutorials
Discussion Forum
Latest Additions
FAQs
Link to us
Submit-a-Script
Web Design Toolbox
Wish List

Contact Us

Script Library

Link to us!!!
Link to US!!!



Electrify your web site with our free copy and paste DHTML scripts, free DHTML Menus, free Dynamic HTML tutorials and javascript.


Home : Slide Shows : Drop Down Slideshow

1

This script uses a simple drop down menu to change images. You can put a custom description for each image in your slideshow. To remain compatible with Netscape, the script uses a form textarea to display the text in Netscape.

Credits:
Created by: Aleksei Evteev
Website: www.dhtml.webcoder.ru/
Browser Information: NN, IE4+
Additional Notes: None

Coding:
Copy and paste this code where you want the changer to display:

selectall


Instructions:

First, put all your images in the same folder, and ensure that they are all the exact same size. If you have one image smaller than the others, just add some white space around it in your favorite graphics program, so that the images aren't stretched out of shape.

Then, you need to place your first image on the page. Replace this with your image:
<img src="1.gif" width="88" height="31" border="1" name="base" alt="1">

For each image, you need two lines in your script, like this:
image1 = new Image();
image1.src = "images/1.gif";

These lines define the location of your images. Just change the number for each image to add additional images. LIke this:

image1 = new Image();
image1.src = "images/1.gif";
image2 = new Image();
image2.src = "images/2.gif";
image3 = new Image();
image3.src = "images/3.gif";
image4 = new Image();
image4.src = "images/4.gif";

Next, you need your text for each image. These follow the same rules as the images. Just increase the number to add new text descriptions,
red[0]="Text for image 1.";
red[1]="Text for image 2.";
red[2]="Text for image 3.";
red[3]="Text for image 4.";

Now change your dropdown list to reflect the titles of your images:

<select name="Myselect" onChange="change()" size="1">
<option value="image1.src" selected>Image 1</option>
<option value="image2.src">Image 2</option>
<option value="image3.src">Image 3</option>
<option value="image4.src">Image 4</option>
</select>

Site designed, coded, and maintained by Web Shorts Site Design.
Copyright © 2000 - 2007 DHTML Shock.
Please read the Terms Of Use before using any of the scripts.
DHTML Shock Privacy Policy | Support DHTMLShock
PO Box 80575, Portland, Oregon 97280

Free Webmaster Resources Web Templates Stock Photos Free Javascripts
Cartweaver ColdFusion Shopping Cart


<reallybig.com>
Web Builder Network Portal
Advertise
on the
Reallybig.com
Network