Hi,

I am trying to build a slid show that will display a default image if an image file is missing.

The code below works as a slide show, it displays a default image on initial page load using the line:

Code:
<img src = "photos/A199.jpg" name = "imgDisplay"  alt="Photo: Ashford Race 2009"
     onerror="imgErr(this);" ...
The imageErr function is called if the file A199.jpg is not available.

I am tying to achieve the same for the images in the slide show:

Code:
function initialize(){
  for(i=0; i<=names.length-1; i++) {
    pictures[i] = new Image(220, 180);
    pictures[i].onLoad=imageLoaded(i);
    pictures[i].onError =imageError(i);
    pictures[i].src = names[i];
  }
} // end initialize
The problem is that both the functions imageLoaded() and imageError() are called wheter or not the image file loads or not in the initialize() function.


The function imageError(pic) just calls alert() so I know that it is called, I would like to have some sort of swopping here to insert the defalut image "images/no-image-image.png" in the case of an error.

I would be obliged if someone could suggest what is wrong and possible corrections.

I have liste the complete code below.

Many thanks,

Peter Vincent


Code:
<html>
<head>
<title>Ashford Pics</title>
<script>

var names = new Array("photos/A1.jpg", "photos/A2.jpg", "photos/A3.jpg" , "photos/A499.jpg");
var pictures = new Array(names.length);
var counter = 0;

// function invoked on image load
function imageLoaded(pic){
	alert("loaded: " + names[pic]);
}

// function invoked on image fail
	function imageError(pic){
	 alert("Error: " + names[pic]);
}


function initialize(){
  for(i=0; i<=names.length-1; i++) {
    pictures[i] = new Image(220, 180);
    pictures[i].onLoad=imageLoaded(i);
    pictures[i].onError =imageError(i);
    pictures[i].src = names[i];
  }
} // end initialize 

function upDate(dir){
  //increments the counter and shows the next name
  counter = counter + dir;
  if (counter > (names.length-1)){
    counter = 0;
  } // end if
  if (counter < 0){
    counter = (names.length-1);
  } // end if
  
  document.imgDisplay.src = pictures[counter].src;
  document.myForm.txtNames.value = names[counter];
} // end upDate

</script>

	<script type="text/javascript"> 
		function imgErr(source) {
			alert("Image load error, for image: " + source.src);
			source.src = "images/no-image-image.png";
			source.onerror = "";
			return true; 
		} 
	</script> 

</head>

<body onLoad = "initialize()">
<center>
<h1>Ashford Pics<hr></h1>
<form name = "myForm">

<img src = "photos/A199.jpg"
     name = "imgDisplay"
     alt="Photo: Ashford Race 2009"
     onerror="imgErr(this);"
     height = 180
     width = 220>
<br>

<input type = "text"
       DISABLED
       name = "txtNames"
       value = "blank">
<br>
<input type = "button"
       value = "previous"
       onClick = "upDate(-1)">

<input type = "button"
       value = "next"
       onClick = "upDate(1)">

</form>
</center>
<hr>
</body>
</html>