Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Swap image has wrong aspect ratio

    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?

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    try this

    Code:
    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)
    Last edited by Lerura; 01-29-2006 at 09:16 PM.

  • #3
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Another fix

    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.


    Code:
    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.

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    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);

  • #5
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Handy utility

    Thanks, that will come in handy in the future.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •