Wrox Home  
Search P2P Archive for: Go

  Return to Index  

javascript thread: Resizing images in Netscape


Message #1 by "Julian Dobson" <juliand@w...> on Thu, 15 Feb 2001 18:50:58
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

  Return to Index