Rotating images and different image dimensions

[John]

I am rotating images at one location of my web site. My problem is if
I set the width and height of the new image before I show the new
image, the old image is stretched first to the new image dimensions,
and if I show the new image before setting its dimensions, the new
image is stretched first to the old image dimension before it is
adjusted to its own dimension.
I would like to load a new image with its own dimension at the same
time. How can I do this?


thank you
John

 

[Lee]

John said:

I am rotating images at one location of my web site. My problem is if
I set the width and height of the new image before I show the new
image, the old image is stretched first to the new image dimensions,
and if I show the new image before setting its dimensions, the new
image is stretched first to the old image dimension before it is
adjusted to its own dimension.
I would like to load a new image with its own dimension at the same
time. How can I do this?

Off the top of my head:

1. change the image to something amorphous, change the dimensions,
then change to your new image. The intermediate image could be
a solid color (white?) or it could be some sort of swirl to give
the impression of an image being rotated.

2. change the visibility of the image to hidden, update it, then
set it back to visible.

3. rewrite the entire <img> tag with the new image and dimensions.

Do all popular browsers allow you to change the dimensions of images
on the fly these days? Some older ones wouldn't allow that.




Do most current browsers allow you to change the dimensions of an
image after it's been rendered? Some older browsers won't.

 

[Ivo]

I am rotating images at one location of my web site. My problem is if
I set the width and height of the new image before I show the new
image, the old image is stretched first to the new image dimensions,

<snip>
Can we see your current code (only the relevant bits, but all of them, and
not exceeding 72(?) characters per line, with some indentation and perhaps a
few well-chosen whitelines)? If not, any suggestion we make is as much to
the point as anything you can read at dynamicdrive.com.

The magic word is preload.
HTH
Ivo

 

[John]

John said:

Off the top of my head:

1. change the image to something amorphous, change the dimensions,
then change to your new image. The intermediate image could be
a solid color (white?) or it could be some sort of swirl to give
the impression of an image being rotated.

2. change the visibility of the image to hidden, update it, then
set it back to visible.

3. rewrite the entire <img> tag with the new image and dimensions.

Do all popular browsers allow you to change the dimensions of images
on the fly these days? Some older ones wouldn't allow that.




Do most current browsers allow you to change the dimensions of an
image after it's been rendered? Some older browsers won't.

I have tried changing the visibility to hidden and then back to
visible but its not working. I don't know how to make a swirl, but I
would prefer not to have effects. I am firing the event onmouseover to
show the images so I don't think its possible to write the <img> tag,
but I would welcome your suggestion of how I can do it.

thank you

 

[John]

I have tried changing the visibility to hidden and then back to
visible but its not working. I don't know how to make a swirl, but I
would prefer not to have effects. I am firing the event onmouseover to
show the images so I don't think its possible to write the <img> tag,
but I would welcome your suggestion of how I can do it.

thank you

Is there someone out there who can help me with this problem?

John