SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard mcsolas's Avatar
    Join Date
    Jul 2004
    Location
    Hermosa Costa Rica
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Replacing an image on a page

    On certain pages, I display 10 pictures as thumbnails and one in the center to view as the main one. It works pretty nice but its not working for me in FF .. so I have to upgrade my coding methods here.

    I have named the picture in question 'swap' in the html.

    The command that activates the swap is here:

    onClick="MM_swapImage('swap','','listings_images/#URL.ID#/#display.img1#',1)"

    Which runs this:

    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];}
    }

    Now to note, that I am not doing a rollover here, just click and swap the image.

    Any suggestions for FF friendly code : )

  2. #2
    SitePoint Guru hgilbert's Avatar
    Join Date
    Dec 2004
    Location
    London
    Posts
    839
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah lose the dreamweaver code
    you should find what you want here:
    http://developer.irt.org/script/image.htm


  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is an example that swaps thumbnails with the main image, but the size of the thumbnail image stays the same when it gets moved to the main image:
    Code:
    <html>
    <head><title></title>
    <script type="text/javascript" language="javascript">
    <!-- Hide from browsers without javascript
    
    function swap(thumb)
    {
    	var main = document.getElementById("main");
    
    	var temp = main.src.substring(0,4) + "Thumb.jpg";
    	main.src = thumb.src.substring(0, 4) + ".jpg";
    	thumb.src = temp;
    }
    
    // End hiding -->
    </script>
    </head>
    <body>
    
    <div>
    <img id="thumb1" onclick="swap(this)" src="green_square.jpg" width="50" height="50" alt="" />
    <img id="thumb2" onclick="swap(this)" src="blue_square.jpg" width="50" height="50" alt="" />
    </div>
    <div>
    <img id="main" src="red_square.jpg" width="50" height="50" alt="" />
    </div>
    
    </body>
    </html>
    If you have sets of images: a thumbnail and a larger image, and you want the larger version to show in the main image area when the swap takes place, you can do something like this, which relies on consistent naming of the pairs of images:

    img1Thumb.jpg
    img1.jpg

    img2Thumb.jpg
    img2.jpg

    etc.
    Code:
    <html>
    <head><title></title>
    <script type="text/javascript" language="javascript">
    <!-- Hide from browsers without javascript
    
    function swap(thumb)
    {
    	var main = document.getElementById("main");
    	var ms = main.src;
    
    	var temp = ms.substring(0,4) + "Thumb.jpg";
    	main.src = thumb.src.substring(0, 4) + ".jpg";
    	thumb.src = temp;
    }
    
    // End hiding -->
    </script>
    </head>
    <body>
    
    <div>
    <img id="thumb1" onclick="swap(this)" src="img1Thumb.jpg" width="50" height="50" alt="" />
    <img id="thumb2" onclick="swap(this)" src="img2Thumb.jpg" width="50" height="50" alt="" />
    </div>
    <div>
    <img id="main" src="img3.jpg" width="640" height="480" alt="" />
    </div>
    
    </body>
    </html>


Bookmarks

Posting Permissions

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