You may like this even better:
Code:
<!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>your title here</title>
<link href="test.css" rel="stylesheet" type="text/css">
<style type="text/css">
.nextprev img {
cursor: pointer;
}
/* Style for Fader script */
#fadeDivCover {
position:absolute;
z-index:10000;
top:0;
left:0;
display:none;
width:100%; /* Set to width of container */
height:100%; /* Leave as 100% for full coverage */
background-color:#666; /* Set to covered element's background, may use full background styles including image */
}
/* End Style for Fader script */
</style>
<script src="test.js" type="text/javascript">
/* Cross Browser Fader © 2008 John Davenport Scheuer
This comment must remain for Legal Use */
</script>
</head>
<body>
<div id="main">
<div id="top">
Test <span class="orange">Page</span> </div>
<div id="year"></div>
<div id="gallery">
<div id="contentRight" style="position:relative;">
<div id="largeImage">
<div align="left"><span class="imgholder"><script type="text/javascript">
document.write('<img onload="fade(\'fadeDivCover\', \'out\', \'\', 2, 40, true);" src="image/gallery1/g1_large_01.jpg" alt="" name="mypicture" id="mypicture">');
</script></span></div>
</div>
<div id="imageText"><script type="text/javascript">
document.write('Image 1 title here. This should be updatable');
</script><noscript>
This Page is best viewed with javascript enabled. Without it you may still click on the images to see larger versions
</noscript></div>
<div id="fadeDivCover">
<div style="position:relative;top:49%;left:3%;">
Loading . . .
</div>
</div> </div>
<table width="150" border="0" cellpadding="0" cellspacing="3" id="thumbs">
<tr>
<td width="75" height="75"><a href="image/gallery1/g1_large_01.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=0;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 1 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_01.jpg" width="75" height="75" border="0" alt=""></a></td>
<td width="75"><a href="image/gallery1/g1_large_02.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=1;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 2 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_02.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr>
<td width="75" height="75"><a href="image/gallery1/g1_large_03.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=2;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 3 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_03.jpg" width="75" height="75" border="0" alt=""></a></td>
<td width="75"><a href="image/gallery1/g1_large_04.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=3;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 4 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_04.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr>
<td width="75" height="75" ><a href="image/gallery1/g1_large_05.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=4;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 5 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_05.jpg" width="75" height="75" border="0" alt=""></a></td>
<td width="75"><a href="image/gallery1/g1_large_06.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=5;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 6 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_06.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr>
<td width="75" height="75"><a href="image/gallery1/g1_large_07.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=6;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 7 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_07.jpg" width="75" height="75" border="0" alt=""></a></td>
<td width="75"><a href="image/gallery1/g1_large_08.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=7;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 8 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_08.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr>
<td width="75" height="75"><a href="image/gallery1/g1_large_09.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=8;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 9 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_09.jpg" width="75" height="75" border="0" alt=""></a></td>
<td width="75"><a href="image/gallery1/g1_large_10.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=9;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 10 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_10.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr>
<td height="75"><a href="image/gallery1/g1_large_11.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=10;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 11 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_11.jpg" width="75" height="75" border="0" alt=""></a></td>
<td><a href="image/gallery1/g1_large_12.jpg" class="activator" onmouseover="fade.reset('fadeDivCover', 'in', true);nextPrev.count=11;mypicture.src=this.href; document.getElementById('imageText').innerHTML ='Image 12 title here. This should be updatable'"><img src="image/gallery1/thumbs/g1_thumb_12.jpg" width="75" height="75" border="0" alt=""></a></td>
</tr>
<tr class="nextprev">
<td height="21"><img onclick="nextPrev(-1);" src="prev.gif" title="Previous" alt="Previous Image" width="75" height="25" border="0"></td>
<td><span class="imgholder"><img onclick="nextPrev(1);" src="next.gif" title="Next" alt="Next Image" width="75" height="25" border="0"></span></td>
</tr>
</table>
<p> </p>
</div>
</div>
<script type="text/javascript" defer>
/* Next/Previous by Classed Elements script
©2008 John Davenport Scheuer - as first
seen in: http://www.dynamicdrive.com/forums/
username: jscheuer1
This notice must remain for legal use
*/
function nextPrev(way){
if(!nextPrev.ready) return;
nextPrev.count = nextPrev.count + way;
nextPrev.count = nextPrev.count >= nextPrev.ar.length? 0 : nextPrev.count < 0? nextPrev.ar.length - 1 : nextPrev.count;
nextPrev.ar[nextPrev.count].onmouseover();
}
nextPrev.count = 0;
;(function(){
if(!document.getElementById) return;
if (!document.getElementsByClassName){
document.getElementsByClassName = function(cn){
cn = cn.replace(/ +/g, ' ').split(' ');
var ar = [], testname = function(n){
for (var re, i = cn.length - 1; i > -1; --i){
re = new RegExp('(^|\W)' + cn[i] + '(\W|$)');
if(!re.test(n)) return false;
}
return true;
}
for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i)
if(testname(d[i].className))
ar[ar.length] = d[i];
return ar;
};
document.getElementsByClassName.spoof = true;
}
nextPrev.ar = document.getElementsByClassName('activator');
for (var i = nextPrev.ar.length - 1; i > -1; --i){
nextPrev.ar[i].onclick = function(){return false;};
nextPrev.ar[i].style.cursor = 'default';
}
if (document.getElementsByClassName.spoof)
document.getElementsByClassName.spoof = document.getElementsByClassName = null;
nextPrev.ready = true;
})();
</script>
</body>
</html>
Change image using previous/next buttons
Reply With Quote
Originally Posted by Nile
Bookmarks