...

View Full Version : Slideshow Help



MitaDC
02-01-2005, 01:17 AM
Hey guys, sorry I don't even know where to start on this but I need to have a page where I click on a pic, say pic #7 and it opens a new window where u can go forward or backwards. Here is an example of the page:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Coeur d'Alene High School Music Department</title>
<link href="default.css" rel="stylesheet" type="text/css">
<script>
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
Jazz_over = newImage("images/Jazz-over.gif");
Symphonic_over = newImage("images/Symphonic-over.gif");
Wind_Ensemble_over = newImage("images/Wind-Ensemble-over.gif");
Chamber_Orchestra_over = newImage("images/Chamber-Orchestra-over.gif");
String_Orchestra_over = newImage("images/String-Orchestra-over.gif");
Other_over = newImage("images/Other-over.gif");
preloadFlag = true;
}
}
// -->
</script>
<style type="text/css">
<!--
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
.style2 {font-size: 12px}
-->
</style></head>

<body onload="preloadImages();">
<table width="581" border="0" cell cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td colspan="3" class="banner"><a href="jazzband.html"></a></td>
</tr>
<tr>
<td width="6" class="leftbar">&nbsp;</td>
<td width="567"><table width="448" height="17" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td><a href="jazzband.html" target="_self"
onmouseover="changeImages('Jazz', 'images/Jazz-over.gif'); return true;"
onmouseout="changeImages('Jazz', 'images/Jazz.gif'); return true;"
onmousedown="changeImages('Jazz', 'images/Jazz-over.gif'); return true;"
onmouseup="changeImages('Jazz', 'images/Jazz-over.gif'); return true;"> <img name="Jazz" src="images/Jazz.gif" width="55" height="17" border="0" alt="Home"></a></td>
<td><a href="symphonicband.html" target="_self"
onmouseover="changeImages('Symphonic', 'images/Symphonic-over.gif'); return true;"
onmouseout="changeImages('Symphonic', 'images/Symphonic.gif'); return true;"
onmousedown="changeImages('Symphonic', 'images/Symphonic-over.gif'); return true;"
onmouseup="changeImages('Symphonic', 'images/Symphonic-over.gif'); return true;"> <img name="Symphonic" src="images/Symphonic.gif" width="85" height="17" border="0" alt="Symphonic Band"></a></td>
<td><a href="index.html" target="_self"
onmouseover="changeImages('Home_Wind', 'images/Home-Wind-over.gif'); return true;"
onmouseout="changeImages('Home_Wind', 'images/Home-Wind.gif'); return true;"
onmousedown="changeImages('Home_Wind', 'images/Home-Wind-over.gif'); return true;"
onmouseup="changeImages('Home_Wind', 'images/Home-Wind-over.gif'); return true;"> <img name="Home_Wind" src="images/Home-Wind.gif" width="78" height="17" border="0" alt="Home"></a></td>
<td><a href="chamberorchestra.html" target="_self"
onmouseover="changeImages('Chamber', 'images/Chamber-over.gif'); return true;"
onmouseout="changeImages('Chamber', 'images/Chamber.gif'); return true;"
onmousedown="changeImages('Chamber', 'images/Chamber-over.gif'); return true;"
onmouseup="changeImages('Chamber', 'images/Chamber-over.gif'); return true;"> <img name="Chamber" src="images/Chamber.gif" width="101" height="17" border="0" alt="Chamber Orchestra"></a></td>
<td><a href="stringorchestra.html" target="_self"
onmouseover="changeImages('String', 'images/String-over.gif'); return true;"
onmouseout="changeImages('String', 'images/String.gif'); return true;"
onmousedown="changeImages('String', 'images/String-over.gif'); return true;"
onmouseup="changeImages('String', 'images/String-over.gif'); return true;"> <img name="String" src="images/String.gif" width="92" height="17" border="0" alt="String Orchestra"></a></td>
<td><a href="other.html" target="_self"
onmouseover="changeImages('Other', 'images/Other-over.gif'); return true;"
onmouseout="changeImages('Other', 'images/Other.gif'); return true;"
onmousedown="changeImages('Other', 'images/Other-over.gif'); return true;"
onmouseup="changeImages('Other', 'images/Other-over.gif'); return true;"> <img name="Other" src="images/Other.gif" width="37" height="17" border="0" alt="Other"></a></td>
</tr>
</table>
<p><span class="title_low"><a href="windensemble.html">Wind Ensemble </a></span> - <span class="title">Pictures</span></p>
<p>&nbsp;</p>
<table width="409" border="0" align="center" cellpadding="0" cellspacing="5">
<tr>
<td width="139"><a href="images/Pictures/High/Wind%20Ensemble/WE---cl.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---cl.JPG" width="139" height="104" border="0"></a></td>
<td width="139"><a href="images/Pictures/High/Wind%20Ensemble/WE---DSC00046.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---DSC00046.JPG" width="139" height="104" border="0"></a></td>
<td width="111"><a href="images/Pictures/High/Wind%20Ensemble/WE---DSC00065.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---DSC00065.JPG" width="139" height="104" border="0"></a></td>
</tr>
<tr>
<td><a href="images/Pictures/High/Wind%20Ensemble/WE---DSC00067.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---DSC00067.JPG" width="139" height="104" border="0"></a></td>
<td><em><a href="images/Pictures/High/Wind%20Ensemble/WE---DSC00073.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---DSC00073.JPG" width="139" height="104" border="0"></a></em></td>
<td><a href="images/Pictures/High/Wind%20Ensemble/WE---DSC00079.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---DSC00079.JPG" width="139" height="104" border="0"></a></td>
</tr>
<tr>
<td><a href="images/Pictures/High/Wind%20Ensemble/WE---holiday-.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---holiday-.JPG" width="139" height="104" border="0"></a></td>
<td><a href="images/Pictures/High/Wind%20Ensemble/WE---tbn.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---tbn.JPG" width="139" height="104" border="0"></a></td>
<td><a href="images/Pictures/High/Wind%20Ensemble/WE---tpt.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---tpt.JPG" width="139" height="104" border="0"></a></td>
</tr>
<tr>
<td><a href="images/Pictures/High/Wind%20Ensemble/WE---tpt2.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---tpt2.JPG" width="139" height="104" border="0"></a></td>
<td><a href="images/Pictures/High/Wind%20Ensemble/WE---vet1.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---vet1.JPG" width="139" height="104" border="0"></a></td>
<td><a href="images/Pictures/High/Wind%20Ensemble/WE---vet2.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---vet2.JPG" width="139" height="104" border="0"></a></td>
</tr>
<tr>
<td height="24"><a href="images/Pictures/High/Wind%20Ensemble/WE---vet3.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---vet3.JPG" width="139" height="104" border="0"></a></td>
<td><a href="images/Pictures/High/Wind%20Ensemble/WE---vet4.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---vet4.JPG" width="139" height="104" border="0"></a></td>
<td><a href="images/Pictures/High/Wind%20Ensemble/WE---vet-horn.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---vet-horn.JPG" width="139" height="104" border="0"></a></td>
</tr>
<tr>
<td height="24"><a href="images/Pictures/High/Wind%20Ensemble/WE---vet-phillips.JPG"><img src="images/Pictures/Low/Wind%20Ensemble/WE---vet-phillips.JPG" width="139" height="104" border="0"></a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<p align="center" class="MsoNormal" style="text-align: center;"><span class="style2">Click each picture to view the larger, higher resolution picture. Be patient if you are on dial-up, the pictures are very large. </span> <br>
</p>
</td>
<td width="8" class="rightbar">&nbsp;</td>
</tr>
<tr>
<td colspan="3" class="footer">&nbsp;</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>



Here's my CSS if u need it:



.banner {
background-image: url(images/banner.gif);
height: 58px;
width: 579px;
overflow: hidden;
}
.leftbar {
background-image: url(images/leftbar.gif);
background-repeat: repeat-y;
}
.rightbar {

background-image: url(images/rightbar.gif);
background-repeat: repeat-y;
}
.footer {
background-image: url(images/footer.gif);
height: 58px;
width: 579px;
}
#section {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-style: normal;
color: #000000;
text-align: center;
}
.title {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: normal;
text-align: left;
letter-spacing: 2px;
}
#section a:link {

font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-style: normal;
color: #000000;
text-align: center;
}
#section a:visited {


font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-style: normal;
color: #000000;
text-align: center;
}
#section a:hover {



font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-style: normal;
color: #0066FF;
text-align: center;
}
#section a:active {




font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-style: normal;
color: #000000;
text-align: center;
}
.title_low {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: normal;
letter-spacing: 2px;
text-align: left;
color: #999999;
}
.title_low a:link {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: normal;
letter-spacing: 2px;
text-align: left;
color: #999999;
}
.title_low a:visited {

font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: normal;
letter-spacing: 2px;
text-align: left;
color: #999999;
}
.title_low a:hover {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: normal;
letter-spacing: 2px;
text-align: left;
color: #0066FF;
text-decoration: underline;
}
.comingSoon {
font-size: 14px;
font-weight: bold;
font-variant: small-caps;
}
.none {
text-align: center;
}
.yell {
font-weight: 400;
color: #999999;
font-size: 12px;
}
.click {
font-weight: lighter;
font-size: 12px;
}

So if I click on the first picture I want to be able to go through all the pictures by either clicking next or previous etc. Thanks

MitaDC
02-01-2005, 08:17 PM
bump^^^

_Aerospace_Eng_
02-01-2005, 08:29 PM
maybe u will find what you are looking for here http://www.dynamicdrive.com/dynamicindex14/index.html i personally use the interactive slide show with text description one, it seems to be what u are looking for



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum