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

[Danny]

Yikes, you don't need js for most of that, just CSS, absolutely
positioned the IMG in the div, make the div position: relative; so it
becomes the parent and the child IMG element uses its dimensions as
references for its properties, and then just center the IMG per
vertically/horizontally by using its height/width, position the IMG say,
left by 50%, and top 50%, so it starts in the middle of the div, then give
it negative margin-left and margin-top of HALF the IMG width/height
respectively. Now, you don't know the IMG dimensions, for that, you can
use js:

var myimg=new Image(); myimg.src='SOMEFILEHERE.png'; //loads the file to
the .src and at the same time, gets a myimg.width and myimg.height from
the file itself, and from there, you stick it to the positioned IMG style,
by document.images['MYHOLDERORSOMETHING'].style.width=myimg.width+'px';
//yes, you need to specify a unit, so you need 'px'.
Danny

On Wed, 29 Jun 2005 10:59:50 -0700, cjl <cj****@gmail.com> wrote:

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

--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/

[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
"cjl" <cj****@gmail.com> wrote in message
news:11*********************@z14g2000cwz.googlegro ups.com...

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