I am using dynamic images in a navigation frame and sometimes the browser is reporting the error document.images['navX'] is null or has no properties. This seems to be a timing problem, as it can be forced by mousing over the navigation links as the page is loading. Whenever it happens the images associated with the first 10 links work OK, but the succeeding ones generate the error.
Here is an example of one navigation item.
And here is my rollover code.
Any tips or observations?
Here is an example of one navigation item.
Code:
<tr><td>
<img name="nav7" src="images/clear8x8.gif" width="8" height="8" border="0" align="right"></td>
<td height="20"><font size="-1">
<a href="donations.html" target="main" onmouseover="point('nav7')" onmouseout="noPoint('nav7')">
Donations</a> </font></td></tr>
And here is my rollover code.
Code:
<script>
var iNavCurrent = "nav1";
if(document.images){
var noPointImage = new Image();
var pointImage = new Image();
var hereNowImage = new Image();
noPointImage.src = "images/clear8x8.gif";
pointImage.src = "images/deltarightgreen8x8.gif";
hereNowImage.src = "images/deltaright8x8.gif";
}
function point(iNav){
if(document.images){
//I put this in to avoid the javascript errors.
if(document.images[iNav]){
document.images[iNav].src = pointImage.src;
}
}
}
function noPoint(iNav){
if(document.images){
if(document.images[iNav]){
if(iNav == iNavCurrent){
document.images[iNav].src = hereNowImage.src;
} else {
document.images[iNav].src = noPointImage.src;
}
}
}
}
//setNav() is called from the pages in the main frame by onload.
function setNav(iNav){
if(document.images){
if(document.images[iNavCurrent] && document.images[iNav]){
document.images[iNavCurrent].src = noPointImage.src;
document.images[iNav].src = hereNowImage.src;
iNavCurrent = iNav;
}
}
}
</script>
Any tips or observations?