Results 1 to 2 of 2

Thread: Thumbnail image display full image?

  1. #1
    Join Date
    Jul 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thumbnail image display full image?

    Hi,

    I'm trying to find a way to have a mouse click of a thumbnail display the full size image of the thumbnail in a table I have assigned. Nothing elaborate I just need it to work.

    My page I'm dealing with is here...

    http://www.jazzyanimator.net/folio.html

    If you view the source code you can see I have a table below the thumbnails where I want to have the thumbnails displayed.

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    1. Change this part in your markup:
    Code:
    <table width="1024" height="46" border="0" align="center">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
    to:
    Code:
    <table style="width:1024px;height:46px;text-align:center;" border="0">
      <tr>
        <td id="rShow">&nbsp;</td>
      </tr>
    </table>
    2. Give you table that contains the picture a class name Rref:
    Code:
    <table width="200" border="0" align="left" class="Rref">
          <tr>
            <td><img src="folio/Indoor HD Render Test.jpg" alt="" width="145" height="81" /></td>
            <td><img src="folio/Ednor Road View.jpg" alt="" width="120" height="81" /></td>
            <td><img src="folio/hvbc_netrender_outside_2112.jpg" alt="" width="120" height="81" /></td>
            <td><img src="folio/Final Shot.jpg" alt="" width="127" height="82" /></td>
          </tr>
        </table>
    	</td>
        <td><table width="200" border="0" align="right" class="Rref">
          <tr>
            <td><img src="folio/Kitch Night.jpg" alt="" width="128" height="86" /></td>
            <td><img src="folio/Liv Room Day.jpg" alt="" width="120" height="81" /></td>
            <td><img src="folio/Cloth Emerge.jpg" alt="" width="127" height="81" /></td>
          </tr>
        </table></td>
    3. Remove the higlighted in your body tag:
    Code:
    <body onload="MM_preloadImages('portfolio-link (rollover).png','WIP-link (rollover).png','Contact-link (rollover).png','Resume-link (rollover).png','ChristianCG-link (rollover).png','images/portfolio-link (rollover).png','images/wip-link (rollover).png','images/contact-link (rollover).png','images/resume-link (rollover).png','images/christiancg-link (rollover).png','images/demo reels-link (rollover).png','images/portf-link-(rollover).png')">
    4. Add this script:
    Code:
    window.onload=function()
    {
    MM_preloadImages('portfolio-link (rollover).png','WIP-link (rollover).png','Contact-link (rollover).png','Resume-link (rollover).png','ChristianCG-link (rollover).png','images/portfolio-link (rollover).png','images/wip-link (rollover).png','images/contact-link (rollover).png','images/resume-link (rollover).png','images/christiancg-link (rollover).png','images/demo reels-link (rollover).png','images/portf-link-(rollover).png');
    for(var rAni=0,ref=document.getElementsByTagName('table');rAni<ref.length;rAni++)
    	{
    	if(ref[rAni].className=='Rref')
    		{
    		for(var i=0,rAnpic=document.getElementsByTagName('img');i<rAnpic.length;i++)
    			{
    			rAnpic[i].onclick=function()
    				{
    				document.getElementById('rShow').innerHTML='<img src="'+this.src+'" alt="myimage">';;
    				}
    			}
    		}
    	}
    }
    5. Have some beer.

    P.S., fix your deprecated attributes.

    Hope it helps.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

Bookmarks

Posting Permissions

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