i have a CMS which allows admin to change two images and their sizes

at present they have to change and save to see what it looks like but i wish to have a method where the CMS shows them what it will look like, so they can have the two images to the sizes they want, as the images are not always going to be the same size.

i wish to have the <div> box refresh its content and show what it will look like.

not sure if i have explained myself clearly but if you have not understood please do ask.

below is what i have created for testing purposes as i could not extract the code from the original code.

but the result of just this part is the same as what i currently have.


thanks in advance for your help.


Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<?
// routine to save the image selected and imgheight to DB already written.

// get imgheight and put in var   $imgheight
// get image name  and put in $imgnameone
?>


<form action="" method="post"><select name="imgnameone">
    <option value="1.jpg">1</option>
    <option value="2.jpg">2</option>
  </select>
  <select name="imgheight">
    <option value="100">100</option>
    <option value="110">110</option>
    <option value="120">120</option>
  </select>
  <input type="submit" name="SAVE" value="SAVE">
</form>
<div><img src="images/<?=$imgnameone;?>" height="<?=$imgheight;?>"></div>


</body>
</html>