Next Butoon??????

[Rachel]

I am putting a photo album on my web page. I want 1 picture on the page and I have aroows for next and previous as well as home. Question is how do I get the arrows to work and go to the next picture or the previous one or home?

[hastx]

depending on how many pics you are using, one easy way might be to add the event handler to the button (or arrow image)

'<input type="button" value="next>>" onClick="window.location=('picture2.html')">'

or you could do a more functional script like a slideshow if you have a lot of pics.

[havik]

Here's a link to some image slideshows:
http://www.dynamicdrive.com/dynamicindex14/index.html

Havik

[Rachel]

I tried what Hastx told me but it did not work. Any other suggestions?

[hastx]

can you post a link or the code you are using to get a better idea?

In order for the code I gave you to work, each pick would have to be in it's own web page. Essentially cut and paste the web page to another page and just change the image and links. It's definately not the best way to do what you are looking for, and if you have a lot of pics, it could get annoying, but it just meant to be easy.

From the link that Havik posted, this script looks close to what you are looking for:


http://www.dynamicdrive.com/dynamicindex14/preloadslide.htm

[Earl]

I use a Album Creator by Xydot that has been very valuable to me over the years, check it out; http://www.xydot.com/

[Rachel]

Here is a link to the page...I am working on the photo album page. Thanks so much for the help!!!!!!!!!!

[URL=http://www.landmarkstructuresinc.net]

[DaveSW]

Have you got a separate html page with the next picture in?

or is it just the pic you want to change?

dave

[Rachel]

No... That is what I am wanting to know, how to do this. I have all the pictures in a file. I put one on the page and the arrow. Now I need to know how to click on the arrow and go to the next picture. I have no clue what I am doing!!!!!!! It has to be obvious.

[DaveSW]

ok

What you want isn't exactly the simplest of things...

would a list of numbers across the bottom be ok? linked to the appropriate image? you can use an iframe to just link to the image if u don't want to create a html file for each. (ask if you want the code)

To make a next button I think u have to make a separate page for each picture, to make the link go to the right place...

[DaveSW]

hastx's link is actually close to what you want. have you managed to check it out? or do you need a hand to set it up?

[Rachel]

I think that the numbers would work fine. Could you send me the code? I am getting off work in about 15 minutes so I might need help with it tomorrow if you can do that. Thank You soooo much!!!

[DaveSW]

ok i'll write it now and post it later

see ya tomorrow

[Rachel]

Oh Thank You again! See you tomorrow.

[DaveSW]

Ok...

Here's a link for you to see it in action
http://www.emdevelopments.co.uk/rachel/iframe.htm

I've tested it in Internet Explorer 5.5, Internet Explorer 6, Mozilla 1.1 and Opera7.1 and it worked in all of them.

Speak to you tomorrow

Dave

[DaveSW]

Here's the code:

<DIV STYLE="text-align:center;">
<DIV> <A HREF="house2.JPG" TARGET="main">1</A>nbsp;nbsp;
<A HREF="house2a.JPG" TARGET="main">2</A>nbsp;nbsp;
<A HREF="house2b.JPG" TARGET="main">3</A>nbsp;nbsp;
<A HREF="house3.JPG" TARGET="main">4</A>nbsp;nbsp;
<A HREF="house3a.JPG" TARGET="main">5</A>nbsp;nbsp;
<A HREF="house4.JPG" TARGET="main">6</A>nbsp;nbsp;
<A HREF="house4a.JPG" TARGET="main">7</A>nbsp;nbsp;
<A HREF="house4b.JPG" TARGET="main">8</A>nbsp;nbsp;
<A HREF="house4c.JPG" TARGET="main">9</A>nbsp;nbsp;
<A HREF="house4d.JPG" TARGET="main">10</A>nbsp;nbsp;
</DIV><IFRAME class="pici" WIDTH="380" HEIGHT="380"
ALIGN="MIDDLE" SCROLLING="NO" NAME="main" SRC="house2.JPG">
</IFRAME> </DIV>

To add an image, all you have to do is add another hyperlink.
So just paste this line under the last <A HREF...> line

<A HREF="house4c.JPG" TARGET="main">9</A>nbsp;nbsp;

and change the filename (e.g. house20.jpg) and the number near the end of the line. The nbsp; is a non-breaking space to split the numbers apart.


If you don't get the how to add the images part, post a list of all the filenames and I'll put them in so you need only paste the code in.

Hope this helps - ask if you get stuck

Dave

[Rachel]

Hey man Thank You, I really appreciate this alot. I am going to try it and I will let you know if it works.

[mixsetup]

Hi here is a slideshow script with buttons you just mouseover to change the immage.
Just change the names of the images
and put all your images in a image folder.
need more help with the script e-mail me


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script LANGUAGE="JavaScript">


{
alt0 = new Image();
alt0.src = "images/logo.gif";

alt1 = new Image();
alt1.src = "images/cordonmale.jpg";

alt2 = new Image();
alt2.src = "images/parrot finch.jpg";

}
function imageChange(imageID,imageName,imageID2,imageName2) {


{
document.images[imageID].src = eval(imageName + ".src");

}

}

</script>

</head>

<body>
<div align="center">
<table align="center" width="731" cellspacing="2" cellpadding="2" border="5">
<tr>
<td><a HREF="http://www.tased.edu.au/tasonlinenw/birds/index.htm" onMouseOver="imageChange('global','alt1','one')" onMouseOut="imageChange('global','alt0','one')"><img SRC="images/but.gif" BORDER="0" NAME="two"></a></td>
<td rowspan="5" colspan="4"><div align="center"><img SRC="images/logo.gif" alt="logo" NAME="global" WIDTH="300" HEIGHT="300" align="middle" ></div></td>
<td><a HREF="http://www.tased.edu.au/tasonlinenw/birds/index.htm" onMouseOver="imageChange('global','alt1','one')" onMouseOut="imageChange('global','alt0','one')"><img SRC="images/but.gif" BORDER="0" NAME="two"></a></td>
</tr>
<tr>
<td><a HREF="http://www.tased.edu.au/tasonlinenw/birds/index.htm" onMouseOver="imageChange('global','alt1','one')" onMouseOut="imageChange('global','alt0','one')"><img SRC="images/but.gif" BORDER="0" NAME="two"></a></td>
<td><a HREF="http://www.tased.edu.au/tasonlinenw/birds/index.htm" onMouseOver="imageChange('global','alt1','one')" onMouseOut="imageChange('global','alt0','one')"><img SRC="images/but.gif" BORDER="0" NAME="two"></a></td>
</tr>
<tr>
<td><a HREF="http://www.tased.edu.au/tasonlinenw/birds/index.htm" onMouseOver="imageChange('global','alt1','one')" onMouseOut="imageChange('global','alt0','one')"><img SRC="images/but.gif" BORDER="0" NAME="two"></a></td>
<td><a HREF="http://www.tased.edu.au/tasonlinenw/birds/index.htm" onMouseOver="imageChange('global','alt1','one')" onMouseOut="imageChange('global','alt0','one')"><img SRC="images/but.gif" BORDER="0" NAME="two"></a></td>
</tr>
<tr>
<td><a HREF="http://www.tased.edu.au/tasonlinenw/birds/index.htm" onMouseOver="imageChange('global','alt1','one')" onMouseOut="imageChange('global','alt0','one')"><img SRC="images/but.gif" BORDER="0" NAME="two"></a></td>
<td><a HREF="http://www.tased.edu.au/tasonlinenw/birds/index.htm" onMouseOver="imageChange('global','alt1','one')" onMouseOut="imageChange('global','alt0','one')"><img SRC="images/but.gif" BORDER="0" NAME="two"></a></td>
</tr>
<tr>
<td><a HREF="http://www.tased.edu.au/tasonlinenw/birds/index.htm" onMouseOver="imageChange('global','alt1','one')" onMouseOut="imageChange('global','alt0','one')"><img SRC="images/but.gif" BORDER="0" NAME="two"></a></td>
<td><a HREF="http://www.tased.edu.au/tasonlinenw/birds/index.htm" onMouseOver="imageChange('global','alt1','one')" onMouseOut="imageChange('global','alt0','one')"><img SRC="images/but.gif" BORDER="0" NAME="two"></a></td>
</tr>
<tr>
<td><a HREF="http://www.tased.edu.au/tasonlinenw/birds/index.htm" onMouseOver="imageChange('global','alt1','one')" onMouseOut="imageChange('global','alt0','one')"><img SRC="images/but.gif" BORDER="0" NAME="two"></a></td>
<td><a HREF="http://www.tased.edu.au/tasonlinenw/birds/index.htm" onMouseOver="imageChange('global','alt1','one')" onMouseOut="imageChange('global','alt0','one')"><img SRC="images/but.gif" BORDER="0" NAME="two"></a></td>
<td><a HREF="http://www.tased.edu.au/tasonlinenw/birds/index.htm" onMouseOver="imageChange('global','alt1','one')" onMouseOut="imageChange('global','alt0','one')"><img SRC="images/but.gif" BORDER="0" NAME="two"></a></td>
<td><a HREF="http://www.tased.edu.au/tasonlinenw/birds/index.htm" onMouseOver="imageChange('global','alt1','one')" onMouseOut="imageChange('global','alt0','one')"><img SRC="images/but.gif" BORDER="0" NAME="two"></a></td>
<td><a HREF="http://www.tased.edu.au/tasonlinenw/birds/index.htm" onMouseOver="imageChange('global','alt1','one')" onMouseOut="imageChange('global','alt0','one')"><img SRC="images/but.gif" BORDER="0" NAME="two"></a></td>
<td><a HREF="http://www.tased.edu.au/tasonlinenw/birds/index.htm" onMouseOver="imageChange('global','alt1','one')" onMouseOut="imageChange('global','alt0','one')"><img SRC="images/but.gif" BORDER="0" NAME="two"></a></td>
</tr>
</table>

</div>

</body>
</html>