[RESOLVED] Displaying 2 Images in Sequence

Please help with the following problem:

Please note the code below I’m developed so far:

For the moment disregarding function thirdPic, I am able to click on “sample text” and I switch from 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=”javascript:secondPic();” id=”blankPic”><img class=”blankPic” id=”blankPic2″ border=”0″ src=”../images/blank.gif”></a>

Also in #JavaScript _↴