It might be a good idea to post lines 42 and 86 (and others that
relate to them.)
The whole page is shown below. I have added some comments to LINE 42
and 86.
Cheers
Nicolaas
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
http://www.w3.org/TR/
html4/strict.dtd">
<html>
<head>
<title>Sunny Side Up Webdesign - ImageChange</title>
<script type="text/javascript">
/* <![CDATA[ */
var exOwner;
var exOptionNumber;
var minNumber = 1;
var maxNumber = 5;
var currentNumber = 1;
function showMe(up) {
//hide old one...
var oldElName = "option" + currentNumber;
if(up == 1) {
currentNumber++;
}
else {
currentNumber--;
}
var newElName = "option" + currentNumber;
if(currentNumber > maxNumber) {
currentNumber = maxNumber;
}
if(currentNumber < minNumber) {
currentNumber = minNumber;
}
if(currentNumber == minNumber) {
//hide previous arrow
document.getElementById("previousArrow").style.display = "none";
}
else {
document.getElementById("previousArrow").style.display = "block";
}
if(currentNumber == maxNumber) {
//hide up arrow
document.getElementById("nextArrow").style.display = "none";
}
else {
document.getElementById("nextArrow").style.display = "block";
}
//startFade(oldElName, 99, 1, 30, 1000); // THIS IS LINE 42 THAT
DOES NOT WORK!
document.getElementById(oldElName).style.display = "none";
document.getElementById(newElName).style.display = "block";
startFade(newElName, 1, 99, 30, 1000);
return true;
}
//you can set these variables
var totalTime = 1000;//in milliseconds
var startOpacity = 0.00; // starting point for fade
var stopOpacity = 99.9990; //end point for fade
var numberOfSteps = 30; //number of steps
//other variables
var speed; //in milliseconds
var opacity; //starting point
var step; //interval for each one
var div;
var startOpacity;
function startFade(elName, startOpacity, stopOpacity, numberOfSteps,
totalTime){
opacity = startOpacity;
step = (stopOpacity - startOpacity) / numberOfSteps;
speed = totalTime / numberOfSteps;
div = document.getElementById(elName);
repeatFade();
return true;
}
function repeatFade() {
opacity += step;
opacity = Math.round(opacity * 1000) / 1000;
var last = false;
if(Math.abs(stopOpacity - opacity) < Math.abs(step)) {
opacity = stopOpacity;
last = true;
}
if(opacity >= 0 && opacity <= 100) {
div.style.filter = "alpha(opacity="+Math.round(opacity)+")";// IE/
Winfilter: alpha(opacity=50)
div.style.KHTMLOpacity = opacity/100;// Safari<1.2, Konqueror
div.style.MozOpacity = opacity/100;// Older Mozilla and Firefox
div.style.opacity = opacity/100;// Safari 1.2, newer Firefox and
Mozilla, CSS3
if(last == false) {
window.setTimeout("repeatFade()", speed); // HERE IS LINE 86 -
WHICH I THINK ALLOWS THE JAVASCRIPT THAT ORIGINALLY CALLED IT TO
CONTINUE ITS COURSE WITHOUT WAITING FOR THE FADE OUT TO BE EXECUTED
(AS CALLED IN LINE 42)
}
}
}
/* ]]> */
</script>
<style type="text/css" media="all">
body {margin: auto; padding: 100px; width: 370px;}
.hideForNow { display: none; }
#arrows a {display: block; width: 70px; float: left;}
</style>
</head>
<body onload="">
<div id="imagePlaceholder">
<div id="option1" class="hideForNow" style="display: block;"><img
src="../../i/004.jpg" alt="image one"><br />caption for image one</
div>
<div id="option2" class="hideForNow"><img src="../../i/021.jpg"
alt="image two"><br />caption for image two</div>
<div id="option3" class="hideForNow"><img src="../../i/022.jpg"
alt="image three"><br />caption for image three</div>
<div id="option4" class="hideForNow"><img src="../../i/023.jpg"
alt="image four"><br />caption for image four</div>
<div id="option5" class="hideForNow"><img src="../../i/025.jpg"
alt="image five"><br />caption for image five</div>
</div>
<div id="arrows">
<a href="#" onclick="return !showMe(0);"
id="previousArrow">previous</a>
<a href="#" onclick="return !showMe(1);" id="nextArrow">next</a>
</div>
</body>
</html>
