PDA

View Full Version : Image Thumbnail Viewer II image position issues



Iona Lynn
05-20-2006, 05:17 PM
SCRIPT:
Image Thumbnail Viewer II image position problems

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

PROPBLEM:
I'm using this script and I do love it but....How do I left justafy the thumbnails and get the large image to load on the right not underneath the thumbnails????

http://www.experimentalcraftworks.com/Photoworks/Flowers.html

here is one page I have up already.
I want the thumbnails on the left in a single colum and the large image to the right not underneath.

like the example page has the script set up.

Thanks for your help in advance.

Iona Lynn

jscheuer1
05-20-2006, 05:22 PM
View the demo's source:


<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>

<td width="20%"><a href="#" onMouseover="modifyimage('dynloadarea', 0)"><img border="0" src="thumb1.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)"><img border="0" src="thumb2.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 2)"><img border="0" src="thumb3.jpg" width="50" height="50" style="margin-bottom: 5px"></a></td>
<td width="80"><!--webbot bot="HTMLMarkup" startspan --><div id="dynloadarea" style="width:50px;height:225px"></div><!--webbot bot="HTMLMarkup" endspan i-checksum="17728" --></td>
</tr>
</table>

It uses a table to achieve that layout. There are other ways.

Iona Lynn
05-20-2006, 05:29 PM
So I take this piece and make a table?




<a href="#" onMouseover="modifyimage('dynloadarea', 0)">
<img src="http://www.experimentalcraftworks.com/images/Photoworks/Flowers/Flower1.jpg"height="150"></a>

<a href="#" onMouseover="modifyimage('dynloadarea', 1)">
<img src="http://www.experimentalcraftworks.com/images/Photoworks/Flowers/flower2.jpg" height="150"></a>

<a href="#" onMouseover="modifyimage('dynloadarea', 2)">
<img src="http://www.experimentalcraftworks.com/images/Photoworks/Flowers/Flower3.jpg" height="150"></a>

<a href="#" onMouseover="modifyimage('dynloadarea', 3)">
<img src="http://www.experimentalcraftworks.com/images/Photoworks/Flowers/Flower4.jpg" height="150"></a>

<a href="#" onMouseover="modifyimage('dynloadarea', 4)">
<img src="http://www.experimentalcraftworks.com/images/Photoworks/Flowers/Flower5.jpg" height="150"></a>

<a href="#" onMouseover="modifyimage('dynloadarea', 5)">
<img src="http://www.experimentalcraftworks.com/images/Photoworks/Flowers/Flower6.jpg" height="150"></a>

<p>

<div id="dynloadarea" style="width:80px;height:225px"></div>


ok thanks this is a bit advanced for me but I'll try my best :D

Iona Lynn
05-20-2006, 05:41 PM
YES I got it to work thanks so much I'll post an exemple in a few.:p :p