MM_swapImage and Safari

[david b]

Hi,
I've used the MM_SwapImage function from Dreamweaver to make a roll over gallery for a photography website. The only problem is when I use safari it changes the aspect ratio of the images.

Here's the link:
http://www.lizethsantos.com/fineart/.../abstract.html

Any solutions?
Thanks

[djr33]

Not sure on how to solve this, but I will say that it's the same here for me. It starts off ok, but then I go over one that is a different size and they all start conforming to that size. Someone should have an answer soon.
I suggest, though, that you should look at dynamically changing the size of the image in addition to changing the src, if you have not already done so.

[david b]

I have fooled around a bit but am unable to really understand the function (since I'm pretty new to javascript). I could really use an experienced coder to comment the code for me! Then maybe I could make some headway on my own.

The Main function:

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=a[i+2];}
}

which calls

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

[Bob90]

I'm not sure if I understand, so take this with a pinch of salt

But basically the swapimage function allows lots of arguments to be passed at once and tries to swap all the srcs of the images.

findObj seems to go through browser checks and tries to find the object and then returns it to the swapImage function

function MM_swapImage() { //v3.0
var i, j=0, x, //Initiating variables (Making them available for this function only as initiated with var)
a=MM_swapImage.arguments; //Even the the brackets () are empty, arguments can still be passed to this function. they are stored in variable a. 

document.MM_sr=new Array; //create new array named MM_sr (As a child of the document)

for(i=0;i<(a.length-2);i+=3) //for all arguments passed -2,
if ((x=MM_findObj(a[i]))!=null) //if the object exists
{
document.MM_sr[j++]=x;  //add it to the array
if(!x.oSrc) x.oSrc=x.src;   //if the object doesn't have an attribute oSrc, make oSrc = the current src
x.src=a[i+2]; //the source = array element [i+2]
}
}

which calls

function MM_findObj(n, d) { //v4.01
var p,i,x; //Local variables
if(!d) d=document; //store document in the varible d, if not already there
if((p=n.indexOf("?"))>0&&parent.frames.length) { //If ? is there (I'm guessing query string) and frames
d=parent.frames[n.substring(p+1)].document; //d = this frames document?
n=n.substring(0,p);} // n = the string up to p
if(!(x=d[n])&&d.all) x=d.all[n];//if not x is an object and the document allows document.all (Old IE versions), x = the object 
for (i=0;!x&&i<d.forms.length;i++) // when x is not found and i is then than the number of forms
x=d.forms[i][n]; //x = the forms object
for(i=0;!x&&d.layers&&i<d.layers.length;i++)// for all layers (Netscape browsers) x=MM_findObj(n,d.layers[i].document); //find x in layers
if(!x && d.getElementById) x=d.getElementById(n);// if get element by id, get x (New browsers)
return x; //obvious
}

[Twey]

If you explcitly assign a height and width to each image using CSS, this shouldn't happen. The script never explicitly changes the image sizes, so it shouldn't be overridden.

[david b]

Thanks for the commenting - that should be a big help.

re: image size specification:
I haven't used CSS for a long time and I only seem to remember that you specify fonts and the like in them but I will look into it. Thanks!

[david b]

Solved it! I replaced the MM_SwapImage function with my own much simpler one

function swapImage(imgE1,imgSrc) {
var imgSize=getSize(imgSrc);
document.images[imgE1].src=imgSrc;
var scale=292/imgSize[1];
document.images[imgE1].height = imgSize[1]*scale;
document.images[imgE1].width = imgSize[0]*scale;
}

where maximum vertical measure of the image and getSize is the following function:

function getSize(imgSrc) {
var myImage = new Image();
myImage.name = imgSrc;
myImage.src = imgSrc;
var w=myImage.width;
var h=myImage.height;
return [w, h];
}

thanks again.