-
Image change on-click
CodeExploited posted the below script in a previous form which works great.
However, I need to change the script so that when the user clicks on the displayed image, it cylcles to the next image i.e. images are cycled through by each click.
Right now, the script uses a menu at the bottom which I don't need. How do I change this?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Change Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function changeIt(objName)
{
//The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
var obj = document.getElementById(objName);
//An array that hold the IDs of images that we mentioned in their DIV blocks
var objId = new Array();
//Storing the image IDs into the array starts here
objId[0] = "image1";
objId[1] = "image2";
objId[2] = "image3";
objId[3] = "image4";
objId[4] = "image5";
//Storing the image IDs into the array ends here
//A counter variable going to use for iteration
var i;
//A variable that can hold all the other object references other than the object which is going to be visible
var tempObj;
//The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
//only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
//of the if statement within this loop.
for(i=0;i<objId.length;i++)
{
if(objName == objId[i])
{
obj.style.display = "block";
}
else
{
tempObj = document.getElementById(objId[i]);
tempObj.style.display = "none";
}
}
return;
}
</script>
</head>
<body>
<div id="image1">
<img src="1.jpg" border="0" alt="one" />
</div>
<div id="image2" style="display:none">
<img src="2.jpg" border="0" alt="two" />
</div>
<div id="image3" style="display:none">
<img src="3.jpg" border="0" alt="three" />
</div>
<div id="image4" style="display:none">
<img src="4.jpg" border="0" alt="four" />
</div>
<div id="image5" style="display:none">
<img src="5.jpg" border="0" alt="five" />
</div>
<br><br>
<a id="one" href="#" onclick="changeIt('image1');">one</a>
<a id="two" href="#" onclick="changeIt('image2');">two</a>
<a id="three" href="#" onclick="changeIt('image3');">three</a>
<a id="four" href="#" onclick="changeIt('image4');">four</a>
<a id="five" href="#" onclick="changeIt('image5');">five</a>
</body>
</html>
-
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Change Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function changeIt(objName)
{
//The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
var obj = document.getElementById(objName);
//An array that hold the IDs of images that we mentioned in their DIV blocks
var objId = new Array();
//Storing the image IDs into the array starts here
objId[0] = "image1";
objId[1] = "image2";
objId[2] = "image3";
objId[3] = "image4";
objId[4] = "image5";
//Storing the image IDs into the array ends here
//A counter variable going to use for iteration
var i;
//A variable that can hold all the other object references other than the object which is going to be visible
var tempObj;
//The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
//only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
//of the if statement within this loop.
for(i=0;i<objId.length;i++)
{
if(objName == objId[i])
{
obj.style.display = "block";
rotate.nu=i;
}
else
{
tempObj = document.getElementById(objId[i]);
tempObj.style.display = "none";
}
}
return;
}
function rotate()
{
//An array that hold the IDs of images that we mentioned in their DIV blocks
var objId = new Array();
//Storing the image IDs into the array starts here
objId[0] = "image1";
objId[1] = "image2";
objId[2] = "image3";
objId[3] = "image4";
objId[4] = "image5";
rotate.nu=rotate.nu||0;
document.getElementById(objId[rotate.nu]).style.display = "none";
rotate.nu=++rotate.nu%objId.length;
document.getElementById(objId[rotate.nu]).style.display = "block";
}
</script>
</head>
<body>
<div id="image1" onmouseup="rotate();" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" border="0" alt="one" />
</div>
<div id="image2" style="display:none" onmouseup="rotate();">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" border="0" alt="two" />
</div>
<div id="image3" style="display:none" onmouseup="rotate();">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" border="0" alt="three" />
</div>
<div id="image4" style="display:none" onmouseup="rotate();">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" border="0" alt="four" />
</div>
<div id="image5" style="display:none" onmouseup="rotate();">
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" border="0" alt="five" />
</div>
<br><br>
<a id="one" href="#" onclick="changeIt('image1');">one</a>
<a id="two" href="#" onclick="changeIt('image2');">two</a>
<a id="three" href="#" onclick="changeIt('image3');">three</a>
<a id="four" href="#" onclick="changeIt('image4');">four</a>
<a id="five" href="#" onclick="changeIt('image5');">five</a>
</body>
</html>
-
-
Hi, this works great!
Just wanted to repeat this several times on the same page. Like having 10 images visible and each one with a rotator (without having to create 10 'rotate' functions).
Also wanted to add a counter like '1/5' using the objId var (with no links, just as a reference for the user), instead of having the '1 2 3 4 5' links.
Can anyone help on this?
-
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<img id="img1" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" onmouseup="zxcImageRotate.Swap('img1');"/>
<a id="img1Page" ></a>
<br />
<br />
<input type="button" name="" value="GoTo 1" onmouseup="zxcImageRotate.Swap('img2',0);" />
<input type="button" name="" value="GoTo 2" onmouseup="zxcImageRotate.Swap('img2',1);" />
<input type="button" name="" value="GoTo 3" onmouseup="zxcImageRotate.Swap('img2',2);" />
<br />
<a>
<img id="img2" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img"
onmouseover="zxcImageRotate.Pause('img2');"
onmouseout="zxcImageRotate.Auto('img2');"
onmouseup="zxcImageRotate.Swap('img2');"
/>
</a>
<br />
<a id="img2Page" ></a>
<br />
<a id="img2Caption" ></a>
<br />
<br />
<script type="text/javascript">
/*<![CDATA[*/
var zxcImageRotate={
init:function(o){
var oop=this,id=o.ID,ary=o.Array,ms=o.AutoRotate,srt=o.AutoStart,img=document.getElementById(id),p=document.getElementById(id+'Page'),t=document.getElementById(id+'Caption'),lk=img.parentNode,z0=0;
for (;z0<ary.length;z0++){
ary[z0][5]=new Image();
ary[z0][5].src=ary[z0][0];
}
o=zxcImageRotate['zxc'+id]={
img:img,
p:p,
t:t,
lk:lk,
ary:ary,
ms:typeof(ms)=='number'?ms:2000,
cnt:0
}
this.page(o);
this.title(o);
if (typeof(srt)=='number'){
this.Auto(id,srt);
}
},
Swap:function(id,nu){
var o=zxcImageRotate['zxc'+id];
if (o){
this.Pause(id);
if (o.ary[nu]){
o.cnt=nu;
}
else {
o.cnt=++o.cnt%o.ary.length;
}
if (o.ary[o.cnt][5].width>40){
o.img.removeAttribute('title');
if (o.ary[o.cnt][1]){
o.img.title=o.ary[o.cnt][1];
}
o.lk.removeAttribute('href');
if (o.ary[o.cnt][3]){
o.lk.href=o.ary[o.cnt][3];
}
o.img.src=o.ary[o.cnt][0];
this.page(o);
this.title(o);
if (nu===true){
this.Auto(id,o.ms);
}
}
else {
this.Swap(id);
}
return false;
}
},
Auto:function(id,ms){
var oop=this,o=zxcImageRotate['zxc'+id];
if (o){
o.to=setTimeout(function(){ oop.Swap(id,true); },ms||200);
}
},
Pause:function(id){
var o=zxcImageRotate['zxc'+id];
if (o){
clearTimeout(o.to);
}
},
page:function(o){
if (o.p){
o.p.innerHTML=(o.cnt+1)+' of '+o.ary.length;
}
},
title:function(o){
if (o.t){
o.t.innerHTML=o.ary[o.cnt][2]||'';
}
}
}
zxcImageRotate.init({
ID:'img1',
Array:[
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg']
]
});
zxcImageRotate.init({
ID:'img2',
Array:[ // an array of arrays defining the image SRCs and titles. (array)
// field 0 = the image SRC.
// field 1 = (optional) the image title.
// field 2 = (optional) the image caption.
// field 3 = (optional) the image parent link HREF.
['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','Image 1','Caption 1'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','Image 2','Caption 2','http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg'],
['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','Image 3','Caption 3']
],
AutoRotate:2000, //(optional) the auto rotate 'hold' delay. (number, default = 2000)
AutoStart:1000 //(optional) the auto rotate 'start' delay on initialization. (number, default = no auto start)
});
/*]]>*/
</script>
</body>
</html>
