Swap image has wrong aspect ratio

[bluerattle]

I am building a site in Dreamweaver for a client which uses templates
for a photogallery that uses simple Javascript to load images "OnClick"
into a named <img> tag. The <img> tag has no dimensions preset because
the loaded images vary in size and aspect ratio (the images
are all prepared so that they will fit easily within the rest of the page
layout, using their actual dimensions).

This all works just fine on Firefox (Apple), but on Safari and Mac IE
there is a problem. When image-2 replaces image-1 (using MM_swapimage),
if image-2 has the same height but a narrower width than image-1, then
image-2 appears with image-1's width. Both image-2 and image-1 have
the same height, so the display of image-2 now has the wrong aspect
ratio (everthing looks "fatter").

I haven't checked Windows browsers yet. I searched around and
haven't seen a similar issue. Anyone know about this, and a good workaround?

[Lerura]

try this

function Swap(tag, Image ,Width ,Height){
document.getElementById(tag).src=image;
document.getElementById(tag).width=Width+'px';
document.getElementById(tag).height=Height+'px';
}

Syntax:
Swap('TagID','ImageName',Width,Height)

[bluerattle]

Thanks, but in this application, the code doesn't know in advance
the dimensions of the new image.

I found a fix that works. I modified the standard Dreamweaver-generated
swap code with a statement that loads up a 1-pixel image file (shown
below as transparent.gif), and then loads the actual new image file.


function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src="../../images/transparent.gif"; x.src=a[i+2];}
}


Again, this problem seemed to occur only when the height of the new
pic is the same as the previous pic, but the width is smaller, on Safari
and Mac IE. Maybe there's other aspects of my particular HTML that
triggered the problem, but this fix works for me.

[Lerura]

in my example you will have to type manually type in the height and width

e.g.
if you want to replace the picture with the id 'BottomPicture' with "MyHome.jpg" (280x170px) you wil have to write:
Swap('BottomPicture','MyHome.jpg',280,170);

you can also store the dimensions of the pictures in an array, like this:
Picture=new Array()
Picture[0]='myHome.jpg,280,170';
Picture[1]='myDog.jpg,200,150';
Picture[2]='myGirl.jpg,160,300';

and then use this function to execute the Swap();

function SwapTo(tag,Pic){
Data=Picture[Pic].split(',');
Swap(tag,Data[0],Data[1],Data[2]);
}

Syntax:
SwapTo('TagID',picture number);

[bluerattle]

Thanks, that will come in handy in the future.