I am trying to create an image in client HTML that displays one of two graphic files, depending on whether both are available. Specifically, if there is a non-English version of the graphic, I want to display that. But if not, I want to display the English version as a backup. The English version should always be available, but the script should react gracefully of course if / when it is not.
I have tried a couple of approaches, both of which worked reasonably well in my IE6 testing, but failed in Netscape 4.79.
The first approach was to declare an "onerror" handler in the "<img>" tag. The error handler loaded the English graphic when the non-English load failed.
The second approach (excerpt below), is to check whether the graphic loaded by checking the height / width of the loaded graphic to determine whether it exists or not. This unfortunately seems to be browser specific. It also seems to have the drawback that I think it is dependent on the graphic download speed whether it works on the initial page load or not. For bandwidth reasons, I'd prefer to only load the English graphic when the non-English is unavailable.
The main problem I'm encountering is that Netscape only briefly displays the graphic, sort of as a miniature thumbnail form, then quickly switches to a broken link.
Does anyone have a suggestion for a more robust, preferably less browser-dependent, approach to try?
Thanks, Bill
Wed, 22 Jan 2003, 11:57am EST
***** begin sample script *****
<html>
<head>
<title>test translated graphic</title>
<script type="text/javascript">
var translatedImage = new Image();
translatedImage.src = "spanish.gif";
var englishImage = new Image();
englishImage.src = "english.gif";
//
// Browser Detection
// - <!-- m --><a class="postlink" href="http://javascript.about.com/library/scripts/blbrowsercheck.htm">http://javascript.about.com/library/scr ... rcheck.htm</a><!-- m -->
//
IE4plus = (document.all) ? true : false;
var testHeight;
var testWidth;
if (IE4plus) {
testHeight = 30;
testWidth = 28;
} else {
testHeight = 0;
testWidth = 0;
}
</script>
</head>
<body>
<hr />
<div>
<img name="test" />
</div>
<script type="text/javascript">
if ( ( testHeight != translatedImage.height) && ( testWidth != translatedImage.width ) ) {
document.images["test"].height = translatedImage.height;
document.images["test"].width = translatedImage.width;
document.images["test"].alt = translatedImage.src;
document.images["test"].src = translatedImage.src;
} else {
document.images["test"].height = englishImage.height;
document.images["test"].width = englishImage.width;
document.images["test"].alt = englishImage.src;
document.images["test"].src = englishImage.src;
}
</script>
I have tried a couple of approaches, both of which worked reasonably well in my IE6 testing, but failed in Netscape 4.79.
The first approach was to declare an "onerror" handler in the "<img>" tag. The error handler loaded the English graphic when the non-English load failed.
The second approach (excerpt below), is to check whether the graphic loaded by checking the height / width of the loaded graphic to determine whether it exists or not. This unfortunately seems to be browser specific. It also seems to have the drawback that I think it is dependent on the graphic download speed whether it works on the initial page load or not. For bandwidth reasons, I'd prefer to only load the English graphic when the non-English is unavailable.
The main problem I'm encountering is that Netscape only briefly displays the graphic, sort of as a miniature thumbnail form, then quickly switches to a broken link.
Does anyone have a suggestion for a more robust, preferably less browser-dependent, approach to try?
Thanks, Bill
Wed, 22 Jan 2003, 11:57am EST
***** begin sample script *****
<html>
<head>
<title>test translated graphic</title>
<script type="text/javascript">
var translatedImage = new Image();
translatedImage.src = "spanish.gif";
var englishImage = new Image();
englishImage.src = "english.gif";
//
// Browser Detection
// - <!-- m --><a class="postlink" href="http://javascript.about.com/library/scripts/blbrowsercheck.htm">http://javascript.about.com/library/scr ... rcheck.htm</a><!-- m -->
//
IE4plus = (document.all) ? true : false;
var testHeight;
var testWidth;
if (IE4plus) {
testHeight = 30;
testWidth = 28;
} else {
testHeight = 0;
testWidth = 0;
}
</script>
</head>
<body>
<hr />
<div>
<img name="test" />
</div>
<script type="text/javascript">
if ( ( testHeight != translatedImage.height) && ( testWidth != translatedImage.width ) ) {
document.images["test"].height = translatedImage.height;
document.images["test"].width = translatedImage.width;
document.images["test"].alt = translatedImage.src;
document.images["test"].src = translatedImage.src;
} else {
document.images["test"].height = englishImage.height;
document.images["test"].width = englishImage.width;
document.images["test"].alt = englishImage.src;
document.images["test"].src = englishImage.src;
}
</script>