Thanks for the prompt reply. Here's the edited code for clarity. I've included comments and generic naming of things so it's not quite so confusing.
<html>
<head>
<script language="JavaScript">
<!--
if (document.images)
{
// Pre-load the images
image1= new Image(190,35);
image1.src="images/save.gif";
image2 = new Image(190,35);
image2.src="images/image2.gif";
image3= new Image(190,35);
image3.src="images/image3.gif";
}
var name_replace;
var email_replace;
// Notice that these are form inputs that are dynamically inserted and changed
// when the user clicks the image for the first time. These should be submitted
// when the forms are submitted (works in IE, not Mozilla, not sure why)
first_replace="<input name=\"first_box\" type=\"text\" value=\"sample1\"><br>";
second_replace="<input name=\"second_box\" type=\"text\" value=\"sample2\"><br>";
function div_replace(which_div, which_text, which_pic)
{
// If the image has already been changed (i.e. whether we are editing the text in the
// dynamically generated input form text box)
if (document[which_pic].src == eval(which_pic + "on.src"))
{
// If we're editing and they click the picture to save the content
// then save whichever form respectively
if (which_pic == "first_pic")
{
document.first_form.submit();
}
if (which_pic == "second_pic")
{
document.second_form.submit();
}
exit;
}
// The code that actually replaces the text with our input box
// Note: this only gets called if this hasn't been already done
// If it's already done, the previous lines will be called and then
// exited
document.getElementById(which_div).innerHTML = which_text;
change_submit(which_pic);
}
function change_submit(imgName)
{
// Change the image after text has been changed
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}
//-->
</script>
<style>
<!-- Fixes image hand mouseover for Mozilla by using two entries -->
.cursor {cursor: pointer; cursor: hand;}
</style>
</head>
<body>
<form name="first_form" action="reload.php" method="POST">
<div id="first_div">
<!-- this will be changed to the input box when the first image is clicked -->
Some dynamically generated text from PHP
</div>
<input type=hidden name="type" value="first_form">
<input type=hidden name="current_page" value="<? echo $_SERVER['PHP_SELF']; ?>">
<a onMouseOver="this.className='cursor';" onclick="javascript:div_replace('first_div', first_replace,'first_pic');">
<img name="first_pic" src="images/image1.gif" border=0 alt="Click to Edit">
</a>
</form>
<form name="second_form" action="reload.php" method="POST">
<div id="second_div">
<!-- this will be changed to the input box when the first image is clicked -->
Some dynamically generated text from PHP
</div>
<input type=hidden name="type" value="second_form">
<input type=hidden name="current_page" value="<? echo $_SERVER['PHP_SELF']; ?>">
<a onMouseOver="this.className='cursor';" onclick="javascript:div_replace('second_div', second_replace,'second_pic');">
<img name="second_pic" src="images/image2.gif" border=0 alt="Click to Edit">
</a>
</form>
</body>
</html>
Note that it works in IE, but not Mozilla or Safari(on the Mac)