Get Picture

This site is best viewed in a modern browser with JavaScript enabled.

tqmd1

Dear Sir,

I have following codes

    	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    	<html xmlns="http://www.w3.org/1999/xhtml">
    	<head><title>My Contacts</title>

	<style type="text/css">

	body{
		margin-top:200px;
		font-family:Georgia, "Times New Roman", Times, serif;
		}

	</style>
	</head>

	<body>
	<center>
	<img src="Photo96.png"><br/>
	<a href="">Get Photo</a>
	</center>
	</body>
	</html>

It shows this image

I want to show new picture where current picture is shown, With pressing Get Photo link.

There should be image selector dialog box to select image file then show in picture box.

No matter what method is atopt, Javascript, Jquery, Ajax, Php and whatever.

Please help

Kevin2

The really easy way is to use an iframe to display the pictures:

    	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    	<html xmlns="http://www.w3.org/1999/xhtml">
    	<head><title>My Contacts</title>

	<style type="text/css">

	body{
		margin-top:200px;
		font-family:Georgia, "Times New Roman", Times, serif;
		}
    #picdisplay{text-align:center;}

	</style>
	</head>

	<body>
	<div id="picdisplay">
    <iframe id="display" name="display" width="300px" height="300px" overflow="auto" frameborder="0" border="0" src="Photo96.png"></iframe>
	<a href="Photo97.png" target="display">Get Photo97</a>
	<a href="Photo98.png" target="display">Get Photo98</a>
	</div>
	</body>
	</html>

B_vidler

Kevin's example is quite unique but just another way for the more "javascripty" method.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>My Contacts</title>
	<style type="text/css">

	body{
		margin-top:200px;
		font-family:Georgia, "Times New Roman", Times, serif;
		}

	</style>
<script>
function changeimg(img_id,img_src) // function to change the image, img_id = the id of the element, img_src = the new src //
{
var img = document.getElementById(img_id).src=img_src;

}
</script>
</head>
	<body>
	<center>
	<img [COLOR="#FF0000"]id="image"[/COLOR] src="http://www.w3schools.com/images/compatible_chrome.gif"><br/>
	<a href="#" [COLOR="#FF0000"]onclick='changeimg("image","http://www.w3schools.com/images/compatible_firefox.gif")[/COLOR]'>Get Photo</a> // onclick to call the function //
	</center>
	</body>
	</html>[/QUOTE]
Hope this helps,

Kevin2

Like the "javascripty" term. In actuality I'd probably not use the iframe solution, but the OP was wanting the photos to show in a "box" which made me think of an iframe. Recently I've been using HTML5/CSS3/jQuery for photo displays/galleries/sliders -- much more elegant. OP can do some Googling for that -- lots of solutions out there.

The other thing I did with my code above was get rid of the <center> tag -- deprecated since XHTML 1.0 strict (?), and completely unsupported in HTML5 -- futureproofing...

Since my previous code was "unique" here's more or less the same thing that validates for HTML5:

<!DOCTYPE html>
<html>
<head>
  <title>My Contacts</title>
  <meta charset="UTF-8">
  <style>

body{
		margin-top:200px;
		font-family:Georgia, "Times New Roman", Times, serif;
       }
#picdisplay{
            text-align:center;
       }

   </style>
</head>

<body>
   <div id="picdisplay">
        <iframe id="display" name="display" width="300" height="300" seamless src="Photo96.png"></iframe>
    	<a href="Photo97.png" target="display">Get Photo97</a>
    	<a href="Photo98.png" target="display">Get Photo98</a>
   </div>
</body>
</html>

tqmd1

Thanks Both teachers.
But my requirement is other.

I do not want to dispaly predefiend file name in iframe as

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    	<html xmlns="http://www.w3.org/1999/xhtml">
    	<head><title>My Contacts</title>

	<style type="text/css">

	body{
		margin-top:200px;
		font-family:Georgia, "Times New Roman", Times, serif;
		}

	</style>
	</head>

	<body>
	<center>

<div id="picdisplay">
    	<iframe id="display" name="display" width="100" height="100" seamless src="Photo96.png"></iframe>

<input type="file" id="upload" name="upload" style=" width: 1px; height: 1px" multiple />
<a href="" target="display" onclick="document.getElementById('upload').click(); return false">Upload</a>
</div>

	</center>
	</body>
	</html>