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> </td>
</tr>
</table>
to:
<table style="width:1024px;height:46px;text-align:center;" border="0">
<tr>
<td id="rShow"> </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.
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.