Here's one I've used from JavaScriptSource.com:
THREE STEPS TO INSTALL PHOTO ALBUM VIEWER:
1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document
--------------------------------------------------------------------------------
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<script LANGUAGE="JavaScript" type="text/javascript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!!
http://javascript.internet.com -->
<!-- Begin
function changeImage()
{
mainimage.src = list.options[list.selectedIndex].value;
}
function prevImage()
{
if(list.selectedIndex == 0)
{
list.selectedIndex = list.options.length-1;
}
else
{
list.selectedIndex--;
}
changeImage();
}
function nextImage()
{
if(list.selectedIndex == list.options.length-1)
{
list.selectedIndex = 0;
}
else
{
list.selectedIndex++;
}
changeImage();
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY onLoad="java script:changeImage()">
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<div align="center">
<img name="mainimage" border="1" alt="" src="mainimage">
<br>
<input type="button" value="Back" onclick="java script:prevImage()">
<select id="list" onchange="java script:changeImage()">
<option value="image1.jpg">First Image</option>
<option value="image2.jpg">Second Image</option>
<option value="image3.jpg">Third Image</option>
<option value="image4.jpg">Fourth Image</option>
</select>
<input type="button" value="Next" onclick="java script:nextImage()">
</div>
Works better if images are same size so there isn't a shift in page as each image is displayed.
Ron
Sign In
Create Account
