View Full Version : Resizing Layers

07-26-2002, 08:31 AM
Hi there,
I have placed an image inside a layer and changes its source often.The problem is that the layer does not get automatically resized according to the imagesize.Can anybody please provide me with the code to resize a layer both in IE and NN.I am passing the width and height through a function.


07-29-2002, 01:31 PM
Hi all,
I don't know where i went wrong in the last question.Anyway thanks to all who didn't answer my question.I searched and found the code myself.But still some problems are breaking my head.As i already told you, i am using a layer in which i change image sources.I have to adjust the layer position most often as the images are of different sizes.I am using the following code for resizing the layer in IE
lyrMain.style.width = W;

when i tried alert(lyrMain.style.width) or alert(lyrMain.style.height), it showed the new values for width and height.But the layer size seems to be the same.For example , i loaded image1.jpg with a dimension of 300*240 and later i changed the source to image2.jpg of size 160*120.Also i set the layer size to 160*120 using the above code. But it does not change the layer size.Instead, it keeps the previous layersize (ie size of the 300*240 image) and leaves blank space after the small image.I have to align all the images in the top-right corner of the window.But it shows a scrollbar when i change the images because of this.PLEASE HELP me.....Please tell me if the question is not clear.

I would be really greatful if somebody can point out any suggestions...

Roy Sinclair
07-29-2002, 07:34 PM
Is your layer postion:relative or position:absolute? With the former the size of your layer may be constrained by size of the containing block. Another thing you should be doing is writing a new IMG tag to the layer, if you're just changing the SRC attribute of an existing IMG tag it may just use the size of the previous image.

07-30-2002, 03:01 AM
Why set the 'layer' size at all? Container elements (<div>, <span>) will resize automatically to changing content, as long as there are no style rules overriding this behavior:

<base href="http://www.weirdclipart.com/images/">
<style type="text/css">

#img_loader {
position: relative;
float: right;
border: 5px silver ridge;

<script type="text/javascript" language="javascript">

function loadDIV(url) {
var d = document.getElementById('img_loader');
d.innerHTML = '<img src="' + url + '">';
alert('DIV width: ' + d.offsetWidth + '\nDIV height: ' + d.offsetHeight);
return false;

<div id="img_loader">&lt;DIV&gt;</div>
<a href="#" onclick="return loadDIV('Mlkjr.gif')">load pic1</a><br>
<a href="#" onclick="return loadDIV('4eyes01.jpg')">load pic2</a><br>
<a href="#" onclick="return loadDIV('http://www.weirdclipart.com/smimages/smgirlheleftbehind.gif')">load pic3</a><br>
<a href="#" onclick="return loadDIV('hcwc01.gif')">load pic4</a>

Maybe I misunderstood the problem you're having...

07-30-2002, 12:25 PM
Your suggestions were the key to the answer.I only had to replace the image source changing code with the one given by adios.ie, instead of changing the src property, i am rewriting all the contents inside the layer.It works pretty well and solves the layer size problem.

Thank u very much for all ur replies,