OK, it's a little strange replying to my own message, but I thought it
best to post up a solution in case others out there are having the same
problem.
The solution is not to use an <IMG> tag for Netscape. According to their
own documentation - which I have to say isn't the easiest thing to find -
the Height and Width properties are read-only. Changing these properties
doesn't do anything, and worse, Netscape doesn't generate an error, so you
never know why the script didn't work.
Anyway, enough moaning about Netscape and on to the solution. The answer
lies in using a <LAYER> tag instead. You can set the width and height of a
layer, as well as supplying a src. In fact, you don't have to worry about
supplying a width and height each time you change the src, a layer is
transparent, so any part of the layer that falls outside the displayed
image isn't visible.
But, you do have to supply the initial height and width for the layer. If
you don't Netscape may clip your image.
On my page I supply an array of images with captions, widths and heights.
I then run the following code to find the maximum width and height of all
the images:
var int_MaxWidth = 0, int_MaxHeight = 0;
for(int_ImageCounter = 0; int_ImageCounter < arr_Images.length;
int_ImageCounter++)
{
if(arr_Images[int_ImageCounter][2] > int_MaxWidth) int_MaxWidth =
arr_Images[int_ImageCounter][2];
if(arr_Images[int_ImageCounter][3] > int_MaxHeight) int_MaxHeight
= arr_Images[int_ImageCounter][3];
}
And then generate a layer tag with this information:
document.write('<layer Name=PhotoLayer width=' + int_MaxWidth + ' Height='
+ int_MaxHeight + '></layer>');
You have to use document.write() because you can't embed client-side
script into the middle of a tag, as in:
<layer Name=PhotoLayer width=<script>document.write
(int_MaxWidth);</script>>
You can then add IE HTML by enclosing it in <NOLAYER></NOLAYER> tags. The
complete section of HTML on my page becomes:
<script>document.write('<layer Name=PhotoLayer width=' +
int_MaxWidth + ' Height=' + int_MaxHeight + '></layer>');</script>
<nolayer>
<img Align=Center Name=Photo width=596 height=398>
<br clear=all>
<div id=Caption></div>
</nolayer>
The function to change the image then becomes something like:
function fnc_DisplayImage()
{
if(int_Image < 0) int_Image = 0;
if(int_Image >= arr_Images.length) int_Image = arr_Images.length -
1;
if(window.navigator.appName.indexOf('Netscape',0) != -1)
{
document.layers['PhotoLayer'].src = '/images/Honeymoon/' +
arr_Images[int_Image][0] + '.jpg';
}
else
{
document.images['Photo'].src = '/images/clear.gif';
document.images['Photo'].width = arr_Images[int_Image][2];
document.images['Photo'].height = arr_Images[int_Image][3];
document.images['Photo'].src = '/images/Honeymoon/' +
arr_Images[int_Image][0] + '.jpg';
Caption.innerHTML = '<br>' + arr_Images[int_Image][1]
+ '<br> ';
}
document.forms[0]['PhotoNumber'].value = int_Image + 1;
}
The only problem with this is that the layer "sits" on top of the main
document, so can hide the rest of the HTML on the page (the layer takes up
no space on the page that contains it). I've tried to solve this by using
an <ILAYER> instead, but for some reason, this crops the top of the
images, which I think is due to the layer being part of a <FORM>.
For those of you interested, the page using this code is at:
http://hex.wrox.com/IE/JandJ/Honeymoon/Default.asp
Julian
> I have a small photo-album app which allows the user to navigate through
a
> buch of photographs. This is done using client-side JavaScript which has
> an array of images, captions, heights and widths.
>
> In IE, changing the height and width of the <IMG> tag works fine,
allowing
> me to swap between landscape and portrait orientations (or different
image
> sizes), but Netscape refuses to change the size of the initial image.
>
> My function looks like:
>
> function fnc_DisplayImage()
> {
> if(int_Image < 0) int_Image = 0;
> if(int_Image >= arr_Images.length) int_Image = arr_Images.length -
> 1;
> document.images['Photo'].width = arr_Images[int_Image][2];
> document.images['Photo'].height = arr_Images[int_Image][3];
> document.images['Photo'].src = '/images/Honeymoon/' + arr_Images
> [int_Image][0] + '.jpg';
> }
>
> Any help appretiated.
>
> Julian