Hi all ~

I'm trying to develop an application that displays several pictures pulled from a database. I want any one of the pictures to appear in a larger main picture container when the user clicks on it. I want to do this on the client side so that the page doesn't post back. I have the following client-side JavaScript function:

<script>
function change(pic)
{
centerPic.src=pic
}
</script>

I have a Literal web control in my C# codebehind that calls the
function with the picture. The following is the code for the Literal:

litSubPics.Text = litSubPics.Text + "<a href='javascript:change("'DisplayPicture.aspx?PictureID=" + (int)dreadPics["PictureID"] + "&MaxWidth=" + 75 + "&MaxHeight=" + 75 + "')" + "'><img src='DisplayPicture.aspx?PictureID=" + (int)dreadPics["PictureID"] + "&MaxWidth=" + 75 + "&MaxHeight=" + 75 + "' /></a>";

I'm confused why this won't work. The c# function is called from the Page_Load event. When I test and roll over any of the pictures javascript:change( appears, but the link is missing. Can anyone tell me why this is happening or suggest an alternative solution?