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.getEl ementById('righ t').height >=
document.getEle mentById('right ').width)
{
var newwidth = (( document.getEle mentById('right ').width * 672) /
document.getEle mentById('right ').height);
document.getEle mentById('right ').height = 672;
document.getEle mentById('right ').width = newwidth;
}
else
{
var newheight = (( document.getEle mentById('right ').height * 672) /
document.getEle mentById('right ').width);
document.getEle mentById('right ').width = 672;
document.getEle mentById('right ').height = newheight;
}
}

function center()
{
if ( document.getEle mentById('right ').height > 672)
{
document.getEle mentById('right ').style.top = '-' +
(Math.abs(docum ent.getElementB yId('right').he ight - 672)/2) + 'px';
}
else
{
document.getEle mentById('right ').style.top =
(Math.abs(docum ent.getElementB yId('right').he ight - 672)/2) + 'px';
}

if ( document.getEle mentById('right ').width > 672)
{
document.getEle mentById('right ').style.left = '-' +
(Math.abs(docum ent.getElementB yId('right').wi dth - 672)/2) + 'px';
}
else
{
document.getEle mentById('right ').style.left =
(Math.abs(docum ent.getElementB yId('right').wi dth - 672)/2) + 'px';
}
}
So, when I want to display my first image, I simply:

document.getEle mentById('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.getEle mentById('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='SOME FILEHERE.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['MYHOLDERORSOME THING'].style.width=my img.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.c om> 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.getEl ementById('righ t').height >=
document.getEle mentById('right ').width)
{
var newwidth = (( document.getEle mentById('right ').width * 672) /
document.getEle mentById('right ').height);
document.getEle mentById('right ').height = 672;
document.getEle mentById('right ').width = newwidth;
}
else
{
var newheight = (( document.getEle mentById('right ').height * 672) /
document.getEle mentById('right ').width);
document.getEle mentById('right ').width = 672;
document.getEle mentById('right ').height = newheight;
}
}

function center()
{
if ( document.getEle mentById('right ').height > 672)
{
document.getEle mentById('right ').style.top = '-' +
(Math.abs(docum ent.getElementB yId('right').he ight - 672)/2) + 'px';
}
else
{
document.getEle mentById('right ').style.top =
(Math.abs(docum ent.getElementB yId('right').he ight - 672)/2) + 'px';
}

if ( document.getEle mentById('right ').width > 672)
{
document.getEle mentById('right ').style.left = '-' +
(Math.abs(docum ent.getElementB yId('right').wi dth - 672)/2) + 'px';
}
else
{
document.getEle mentById('right ').style.left =
(Math.abs(docum ent.getElementB yId('right').wi dth - 672)/2) + 'px';
}
}
So, when I want to display my first image, I simply:

document.getEle mentById('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.getEle mentById('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(divnam e, imagesrc) {
var output = "<img src='" + imagesrc + "'>";
if (document.all)
document.all(di vname).innerHTM L = output;
else if (document.layer s) {
document.layers[divname].document.open( );
document.layers[divname].document.write ln(output);
document.layers[divname].document.close ();
}
else if (!document.all && document.getEle mentById)
document.getEle mentById(divnam e).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.c om> wrote in message
news:11******** *************@z 14g2000cwz.goog legroups.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.getEl ementById('righ t').height >=
document.getEle mentById('right ').width)
{
var newwidth = (( document.getEle mentById('right ').width * 672) /
document.getEle mentById('right ').height);
document.getEle mentById('right ').height = 672;
document.getEle mentById('right ').width = newwidth;
}
else
{
var newheight = (( document.getEle mentById('right ').height * 672) /
document.getEle mentById('right ').width);
document.getEle mentById('right ').width = 672;
document.getEle mentById('right ').height = newheight;
}
}

function center()
{
if ( document.getEle mentById('right ').height > 672)
{
document.getEle mentById('right ').style.top = '-' +
(Math.abs(docum ent.getElementB yId('right').he ight - 672)/2) + 'px';
}
else
{
document.getEle mentById('right ').style.top =
(Math.abs(docum ent.getElementB yId('right').he ight - 672)/2) + 'px';
}

if ( document.getEle mentById('right ').width > 672)
{
document.getEle mentById('right ').style.left = '-' +
(Math.abs(docum ent.getElementB yId('right').wi dth - 672)/2) + 'px';
}
else
{
document.getEle mentById('right ').style.left =
(Math.abs(docum ent.getElementB yId('right').wi dth - 672)/2) + 'px';
}
}
So, when I want to display my first image, I simply:

document.getEle mentById('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.getEle mentById('right ').src.height?

Help?

-CJL