<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
<body>
<h1>Call a PHP Image Server</h1>
<div>
<fieldset style="width:400">
<legend>Retrieve an Image</legend>
<label for="file">Image name:</label>
<input type="text" id="file" size=40 value="new_york3.jpg" onchange=getImage(this.value) />
<input type="button" value="go" onclick=getImage(document.getElementById('file').value) />
<br />
</fieldset>
</div>
<br />
<img src=new_york1.jpg> <!-- a regular image -->
<img src=imgServer.php?file=new_york2.jpg> <!-- call the PHP image server -->
<span id=img></span>
<script>
function getImage(imageName)
{
document.getElementById('img').innerHTML = '<img src=imgServer.php?file=' + imageName + '>';
}
</script>
</body>
</html>