Hello, I need a script that can change an image when you click it, and step through a number of different images, like a slideshow (no "previous" button, just next). I want to have several on one page, but I would still like to use only one script. Preferably I want to write the img tag something like this:
I don't know exactly how to do this, I've tried to adapt several scripts but it doesn't quite work. One example that is close to what I want is the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Basic Slide Show (10-July-2006)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
// A very basic Slide Show defined as an image in the HTML code.
// The Slide Show images are defined in the activating call
// which also changes the image to the next image.
//
// There may be as many applications on a page as required.
//
//
// ***** Application Notes
// **** The HTML Code
//
// Each Slide Show is defined as an image in the HTML code.
// Each Slide Show image must be assigned with a unique ID name.
// e.g.
// <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" >
//
// **** Activating(Rotating) a Slide Show
//
// The Slide Show is 'rotated to the next image by a event call to function 'zxcSlideShow'
// Example by clicking the image:
// <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100"
// onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
// Example by clicking a button:
// <input type="button" name="" value="Fwd" onclick="zxcSlideShow('Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
//
// where:
// parameter 0 = the image object or unique ID name. (string)
// parameter 1 = the common directory path for all images. (string)
// or '' and specify the path as part of the image file name
// subsequent parameters:
// the image file name of the Slide Show images (string)
//
// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// These characters are easily changed to characters of choice using global find and replace.
// The functional code(about 0.5K) is best as an external JavaScript
// Tested with IE6 and Mozilla FireFox
// ***** Functional Code NO NEED to Change
function zxcSlideShow(){
var zxcargs=zxcSlideShow.arguments;
var zxcobj=zxcargs[0];
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!window['zxcSlideShow'+zxcobj.id]){
var zxcary=[0,zxcargs[1]];
for (var zxc0=2;zxc0<zxcargs.length;zxc0++){
zxcary.push(zxcargs[zxc0]);
}
window['zxcSlideShow'+zxcobj.id]=zxcary;
}
var zxcary=window['zxcSlideShow'+zxcobj.id];
zxcary[0]=++zxcary[0]%(zxcary.length-2);
zxcobj.src=zxcary[1]+zxcary[zxcary[0]+2];
}
//-->
</script>
</head>
<body>
<img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=100 height=100
onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
<br>
<input type="button" name="" value="Fwd" onclick="zxcSlideShow('Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
<br>
<br>
<br>
<img id="Img2" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=100 height=100
onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
<br>
<input type="button" name="" value="Fwd" onclick="zxcSlideShow('Img2','http://www.vicsjavascripts.org.uk/StdImages/','Zero.gif','One.gif', 'Two.gif', 'Three.gif','Four.gif','Five.gif','Six.gif')">
</body>
</html>
PS
will only be a couple more lines to give this fwd, back functionality
Thank you for that quick reply, it works perfectly! Seems to be exactly what I was after. I'll give you credit on the website, once it's up (http://www.olofbruce.se/). Big thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Basic Slide Show (10-July-2006)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
// A very basic Slide Show defined as an image in the HTML code.
// The Slide Show images are defined in the activating call
// which also changes the image to either the 'Next' or 'Back'.
//
// There may be as many applications on a page as required.
//
//
// ***** Application Notes
// **** The HTML Code
//
// Each Slide Show is defined as an image in the HTML code.
// Each Slide Show image must be assigned with a unique ID name.
// e.g.
// <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" >
//
// **** Activating(Rotating) a Slide Show
//
// The Slide Show is 'rotated to the next image by a event call to function 'zxcSlideShow'
// Example by clicking the image:
// <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100"
// onclick="zxcSlideShow(1,this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
// Example by clicking a button:
// <input type="button" name="" value="Next" onclick="zxcSlideShow(1,'Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
// <input type="button" name="" value="Back" onclick="zxcSlideShow(-1,'Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
//
// where:
// parameter 0 = rotation, 1 = next, -1 = back. (1 or -1)
// parameter 1 = the image object or unique ID name. (string)
// parameter 2 = the common directory path for all images. (string)
// or '' and specify the path as part of the image file name
// subsequent parameters:
// the image file name of the Slide Show images (string)
//
// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// These characters are easily changed to characters of choice using global find and replace.
// The functional code(about 0.6K) is best as an external JavaScript
// Tested with IE6 and Mozilla FireFox
// ***** Functional Code NO NEED to Change
function zxcSlideShow(){
var zxcargs=zxcSlideShow.arguments;
var zxcobj=zxcargs[1];
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
if (!window['zxcBSS'+zxcobj.id]){
var zxcary=[0];
for (var zxc0=3;zxc0<zxcargs.length;zxc0++){
zxcary.push(zxcargs[zxc0]);
}
window['zxcBSS'+zxcobj.id]=zxcary;
}
var zxcary=window['zxcBSS'+zxcobj.id];
zxcary[0]+=zxcargs[0];
if (zxcary[0]<0){zxcary[0]=zxcary.length-2; }
if (zxcary[0]==zxcary.length-1){zxcary[0]=0; }
zxcobj.src=zxcargs[2]+zxcary[zxcary[0]+1];
}
//-->
</script>
</head>
<body>
<img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=100 height=100
onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
<br>
<input type="button" name="" value="Next" onclick="zxcSlideShow(1,'Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
<input type="button" name="" value="Back" onclick="zxcSlideShow(-1,'Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
<br>
<br>
<br>
<img id="Img2" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=100 height=100
onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
<br>
<input type="button" name="" value="Fwd" onclick="zxcSlideShow(1,'Img2','http://www.vicsjavascripts.org.uk/StdImages/','Zero.gif','One.gif', 'Two.gif', 'Three.gif','Four.gif','Five.gif','Six.gif')">
</body>
</html>
Before you post, read our: 
