www.webdeveloper.com
Results 1 to 5 of 5

Thread: Get Picture

Hybrid View

  1. #1
    Join Date
    Dec 2011
    Posts
    39

    Get Picture

    Dear Sir,

    I have following codes

    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>
        	</head>
        
        	<body>
        	<center>
        	<img src="Photo96.png"><br/>
        	<a href="">Get Photo</a>
        	</center>
        	</body>
        	</html>
    It shows this image
    http://i40.tinypic.com/141saa0.jpg

    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
    Last edited by tqmd1; 12-02-2013 at 01:47 PM.

  2. #2
    Join Date
    Oct 2013
    Posts
    415
    The really easy way is to use an iframe to display the pictures:
    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;
        		}
            #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>

  3. #3
    Join Date
    Jul 2013
    Posts
    27
    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 id="image" src="http://www.w3schools.com/images/compatible_chrome.gif"><br/>
    <a href="#" onclick='changeimg("image","http://www.w3schools.com/images/compatible_firefox.gif")'>Get Photo</a> // onclick to call the function //
    </center>
    </body>
    </html>
    Hope this helps,

  4. #4
    Join Date
    Oct 2013
    Posts
    415
    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:

    Code:
    <!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>

  5. #5
    Join Date
    Dec 2011
    Posts
    39
    Thanks Both teachers.
    But my requirement is other.

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

    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>
        	</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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles