Web Analytics Made Easy -
StatCounter thumbnails and links to enlarge in the same page - CodingForum

Announcement

Collapse
No announcement yet.

thumbnails and links to enlarge in the same page

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • thumbnails and links to enlarge in the same page

    I am very new to html coding but very willing to learn and put in a lot of time and effort.
    I have thumbnails on my site and I want the larger version of the picture to appear on ths same page when clicked. I don't want the browser to reload or assign another htm page. I don't know the specific name for this and I think it's pretty easy for a pro.

  • #2
    Sure is... give us your code already... and then tell us where you want the image to appear. And I am sure some one can/will help you out.
    Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

    Comment


    • #3
      thumbnails..

      it is something like this. will I use the image place holder ? I am not sure

      Comment


      • #4
        Here is a very simple example you can build off of.
        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>
        	<script type="text/javascript">
        	
        		function ShowImage( url ) {
        			var obj = document.getElementById('image');
        			if ( obj ) {
        				obj.src = url;
        				obj.style.display = 'inline';
        			}
        		}
        	
        	
        	
        	</script>
        
        <title>Untitled Document</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        </head>
            <a onclick='ShowImage("http://www.neowise.com/etc/samples/animals/animal004.jpg");'><img src="http://www.neowise.com/etc/samples/animals/tn_animal004.jpg" /></a>
        	<div style="border:1px solid black;">
        		<img id='image' style='display: none;' />
        	</div>
        
        <body>
        </body>
        </html>
        Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

        Comment


        • #5
          Here is the code which i think is just what you wanted.

          Code:
           <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
          
          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
          <head> 
          <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> 
          
          <style type="text/css"> 
          img { border: 1px solid #000 } 
          
          #container { 
          text-align: center; 
          border: 0px solid #000; 
          margin: 0 auto; 
          height: 300px; 
          width: 600px; 
          padding: 20px 
          } 
          
          #leftcol img { 
          margin: 10px; 
          width: 100px; 
          height: 100px 
          } 
          
          #rightcol img { 
          margin: 10px; 
          width: 200px; 
          height: 200px; 
          } 
          
          </style> 
          </head> 
          
          <body> 
          
          <div id="container"> 
          
          <div id="rightcol"> 
          <img name="ImageOnly" src="a.jpg" /> 
          </div> 
          
          <div id="leftcol"> 
          <a href="#" onclick="ImageOnly.src='a.jpg'"><img src="a.jpg" /></a> 
          <a href="#" onclick="ImageOnly.src='b.jpg'"><img src="b.jpg" /></a> 
          <a href="#" onclick="ImageOnly.src='c.jpg'"><img src="c.jpg" /></a> 
          <a href="#" onclick="ImageOnly.src='d.jpg'"><img src="d.jpg" /></a> 
          </div> 
          
          </div> 
          
          </body> 
          </html>
          Get Mozilla Firefox

          Comment

          Working...
          X