C
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
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