Log in

View Full Version : Thumbnail image display full image?



jazzyanimator
07-16-2008, 08:20 PM
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.

rangana
07-17-2008, 06:15 AM
1. Change this part in your markup:


<table width="1024" height="46" border="0" align="center">
<tr>
<td>&nbsp;</td>
</tr>
</table>


to:


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


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


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


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 (http://www.codehelp.co.uk/html/deprecated.html).

Hope it helps.