layers?

@AshcrapperAug 24.2004

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

to post a comment

JavaScript

@Mr_JAug 24.2004 — #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

@AshcrapperauthorAug 24.2004 — #link appears to be dead mate?

@JPnycAug 24.2004 — #How many thumbnails? Is it going to require frames?

@AshcrapperauthorAug 24.2004 — #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

@JPnycAug 24.2004 — #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_JAug 24.2004 — #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

@JPnycAug 25.2004 — #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.

layers?

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

layers?

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴