Changing More Than One Image

[argentum13]

I want to change images without going to a slideshow format.
Code I'm using is below.

For the moment disregarding function thirdPic, I am able to click on "sample text" and I switch an invisible image (actually 1 px by 1 px) with a picture of a book with a quote (firstPic) that I want to appear on screen. After reading the quote the reader can click on the image of the book and it will disappear. And it works fine. However, there are a couple of cases where I would like to show a lengthier quotation which would require me to click on the first book image(firstPic) and a second book image would appear with more text(thirdPic). I can get the second image to appear but I can't get it to disappear. Or I can get the first image to appear and get back to the empty screen but I want to do both.
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.


Javascript Code
----------------------------------

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="javascriptsecondPic();" id="blankPic"><img class="blankPic" id="blankPic2" border="0" src="../images/blank.gif"></a>

 

[argentum13]

I want to state my problem more clearly

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="javascript: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.

I can get: (1) blank.gif to (2) pic657.gif to (3) pic721.gif.

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

 

[argentum13]

I've solved the problem