layers?

[Ashcrapper]

Can anyone point me in the direction of a tutorial or possibly give me a hand doing the following:

Doing a site for a food company, and they want small thumbnails displayed down the side of the page, and then when clicked will display on a main image section on the same page. is the a way of doing this with layers or something rather than me having to do loads of pages?

The site is built using tables and will be centred in the browser window. Using html/css/possibly asp if needed

Cheers
Ash

[Mr J]

Take a look at the Image Gallery examples here, 1 might do for you or maybe be adapted

www.huntingground.freeserve.co.uk/scripts/snav.htm

[Ashcrapper]

link appears to be dead mate?

[JPnyc]

How many thumbnails? Is it going to require frames?

[Ashcrapper]

could be looking at approx 10 thumbnails on the page, its just a normal html page:

http://www.forteweb.co.uk/natures/

the space down the right would be for the thumbnails and the main image would be changable

[JPnyc]

Here's an example with just 3 thumbnails, but you should get the idea

<script type="text/javascript" language="javascript" src="animate.js"></script>
<script type="text/javascript" language="javascript">
<!--
var pic= new Array(9);
var i,x,y=pic.index;
i=0;
x=3;
y = 6;
pic[0]="B17TH.jpg";
pic[1]="B16TH.jpg"
pic[2]="index.gif";
pic[3]="mapleBefore.gif";
pic[4]="mapleAfter.gif";
pic[5]="index.gif";
pic[6]="brickBefore.gif";
pic[7]="brickAfter.gif";
pic[8]="index.gif";
{
function on()
{
document.one.src=pic[i];
if(i<2)
{
i++;
}
else { i=0; }
} }

{
function tw()
{
document.one.src=pic[x];
if(x<5)
{
x++;
}
else { x=3; }
} }
{
function th()
{
document.one.src=pic[y];
if(y<8)
{
y++;
}
else { y=6; }
} }

However you can also just create the array, set the src of the big img tag to i, then on each thumbnail, you can pass the value of i that you need to display that pic. Inside the thumbnail tab onclick="functionName(i=3)" or whatever number. You may need to use self.i for browsers other than IE.

[Mr J]

Sorry, there was a typo in there, I've amended the link in my previous post but here it is again just in case


www.huntingground.freeserve.co.uk/scripts/snav.htm

[JPnyc]

Try this:

var pic= new Array(9);
var i=pic.index;
i=0;

pic[0]="B17TH.jpg";
pic[1]="B16TH.jpg"
pic[2]="index.gif";
pic[3]="mapleBefore.gif";
pic[4]="mapleAfter.gif";
pic[5]="index.gif";
pic[6]="brickBefore.gif";
pic[7]="brickAfter.gif";
pic[8]="index.gif";
{
function bigPic()
{
document.nameOfImgTag.src=pic[i];

}

Then inside each thumbnail img tag, put onclick="bigPic(i=3)" or whatever number corresponding to that pic in the array.