Shrinking and Centering an image of unknown size

[cjl]

Hey all:

I have a div of a known size, 672px X 672px. In it I will display
images that are of unknown size. I have two simple functions that
shrink and center the image:

function shrink()
{
if (document.getElementById('right').height >=
document.getElementById('right').width)
{
var newwidth = (( document.getElementById('right').width * 672) /
document.getElementById('right').height);
document.getElementById('right').height = 672;
document.getElementById('right').width = newwidth;
}
else
{
var newheight = (( document.getElementById('right').height * 672) /
document.getElementById('right').width);
document.getElementById('right').width = 672;
document.getElementById('right').height = newheight;
}
}

function center()
{
if ( document.getElementById('right').height > 672)
{
document.getElementById('right').style.top = '-' +
(Math.abs(document.getElementById('right').height - 672)/2) + 'px';
}
else
{
document.getElementById('right').style.top =
(Math.abs(document.getElementById('right').height - 672)/2) + 'px';
}

if ( document.getElementById('right').width > 672)
{
document.getElementById('right').style.left = '-' +
(Math.abs(document.getElementById('right').width - 672)/2) + 'px';
}
else
{
document.getElementById('right').style.left =
(Math.abs(document.getElementById('right').width - 672)/2) + 'px';
}
}


So, when I want to display my first image, I simply:

document.getElementById('right').src = cr_images[0][0].src;
shrink();
center();

This works. However, when I want to change the image to another image
with a different size, it uses the previous images height and width. In
the html of the page I have an img tag which sources a 1px gif, without
specifying the height or width.

Is there some way to 'reset' the height and width, or read it from
something like document.getElementById('right').src.height?

Help?

-CJL

 

[Dominic Tocci]

Are you just setting the .src of the image to change images? I would try
using some dynamic html to render the new image instead. That way it should
be a new object.

function newImage(divname, imagesrc) {
var output = "<img src='" + imagesrc + "'>";
if (document.all)
document.all(divname).innerHTML = output;
else if (document.layers) {
document.layers[divname].document.open();
document.layers[divname].document.writeln(output);
document.layers[divname].document.close();
}
else if (!document.all && document.getElementById)
document.getElementById(divname).innerHTML = output;
}

You will probably have to modify your other two functions a bit to be able
to target the new image more dynamically. I'm not sure if you can keep
naming it "right" without causing a problem. Perhaps referencing the image
using document.images[x] (where x is the index of the targeted image) could
simplify things.

Hope this helps,
Dominic

Hey all:

I have a div of a known size, 672px X 672px. In it I will display
images that are of unknown size. I have two simple functions that
shrink and center the image:

function shrink()
{
if (document.getElementById('right').height >=
document.getElementById('right').width)
{
var newwidth = (( document.getElementById('right').width * 672) /
document.getElementById('right').height);
document.getElementById('right').height = 672;
document.getElementById('right').width = newwidth;
}
else
{
var newheight = (( document.getElementById('right').height * 672) /
document.getElementById('right').width);
document.getElementById('right').width = 672;
document.getElementById('right').height = newheight;
}
}

function center()
{
if ( document.getElementById('right').height > 672)
{
document.getElementById('right').style.top = '-' +
(Math.abs(document.getElementById('right').height - 672)/2) + 'px';
}
else
{
document.getElementById('right').style.top =
(Math.abs(document.getElementById('right').height - 672)/2) + 'px';
}

if ( document.getElementById('right').width > 672)
{
document.getElementById('right').style.left = '-' +
(Math.abs(document.getElementById('right').width - 672)/2) + 'px';
}
else
{
document.getElementById('right').style.left =
(Math.abs(document.getElementById('right').width - 672)/2) + 'px';
}
}


So, when I want to display my first image, I simply:

document.getElementById('right').src = cr_images[0][0].src;
shrink();
center();

This works. However, when I want to change the image to another image
with a different size, it uses the previous images height and width. In
the html of the page I have an img tag which sources a 1px gif, without
specifying the height or width.

Is there some way to 'reset' the height and width, or read it from
something like document.getElementById('right').src.height?

Help?

-CJL