Placing 3 images Sequentially

[Chris Silver]

Using the code below this is what I want to do:

In this instance, as is, upon clicking on the text, "sample text" the image pic657.gif appears. Upon clicking upon image pic657.gif, it is replaced by pic721.gif. Yes this works fine as is. If I were to change the code to href="javascrip t:thirdPic()" then image pic721.gif would NOT appear and the screen would go back to blank.gif. I can get EITHOR/OR but NOT BOTH which is what I want.

I WANT to go from (1) blank.gif to (2) pic657.gif to (3) pic721.gif to (4) blank.gif.

So far what I can get is : (1) blank.gif to (2) pic657.gif to (3) pic721.gif.

OR (1) blank.gif to (2) pic657.gif to (4) blank.gif.

and it works well in most browsers.

Everything I've tried to do doesn't work.
I DO NOT WANT TO HAVE BUTTON TO CLICK THROUGH A SLIDESHOW.
It would not be the representation I want ot produce.

Thank you for any help you can give, even if its just pointing me in the right direction.

function firstPic()	
	{			 		 
	 	 document.getElementById('blankPic2').src="../images/pic657.gif";
		 document.getElementById('blankPic2').width="792";
		 document.getElementById('blankPic2').height="641";
		 document.getElementById('blankPic2').style.position="absolute";
		 document.getElementById("blankPic2").style.top="900";
		 document.getElementById("blankPic2").style.left="200";		 
		 document.getElementById("blankPic2").style.zIndex="5";			
  	} 


function  secondPic()
	{	
		 document.getElementById('blankPic2').src="../images/blank.gif";
		 document.getElementById('blankPic2').width="1";
		 document.getElementById('blankPic2').height="1";
		 document.getElementById('blankPic2').style.position="absolute";
		 document.getElementById("blankPic2").style.top="700";
		 document.getElementById("blankPic2").style.left="200";		 
		 document.getElementById("blankPic2").style.zIndex="-5";
	}

function thirdPic()	
	{			 		 
	 	 document.getElementById('blankPic2').src="../images/pic721.gif";
		 document.getElementById('blankPic2').width="792";
		 document.getElementById('blankPic2').height="641";
		 document.getElementById('blankPic2').style.position="absolute";
		 document.getElementById("blankPic2").style.top="700";
		 document.getElementById("blankPic2").style.left="200";		 
		 document.getElementById("blankPic2").style.zIndex="5";			 
	}


HTML Code
-------------------------
<a href="javascript:firstPic();" class="firstPic" id="firstPic">sample text</a> 
<a href="javascript:secondPic();" id="blankPic"><img class="blankPic" id="blankPic2" border="0" src="http://bytes.com/submit/images/blank.gif"></a>

[acoder]

One way to do it is have 1 function which you call to change the image, and keep a pointer to an array which contains the image files names:

var images = ["blank.gif","pic657.gif","pic721.gif"];

Initially the pointer would be 0. Then when you call the function, add 1 to it and then get the next image. If the pointer is greater than the length of images array, then reset it to 0.

[Chris Silver]

Thanks For Your Help

I've got it working just the way I want with your suggestion.

Now I'm just trying to clean it up.

Thanks so much for the help.

Chris