Placing 3 images Sequentially

Upon clicking on the text, "sample text" (Code Below) 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.

blank.gif is a 1 px by 1 px image (essentially invisible)

I can get EITHER/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.

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>