SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 3 Level Image Swapping for a Newbie

    I'm new to Javascript so bear with me.

    I have a table with 4 thumbnails on the right side. I've used Javascript to display a larger mid-sized image in a 5th cell to their left. This image changes whenever I click on the appropriate thumbnail. I've assigned "MyImage" to that cell's name and my onclick statement reassigns the larger image's nane and displays it properly. So far, so good.

    Next I want to click on the mid-size image to bring up a new window with that image displayed in a larger XGA sized resolution. I've tried numerous ways to make this happen but I keep getting the XGA sized image of the first thumbnail and the XGA image size doesn't swap.

    The code is as follows:

    Code:
    <table border="0" width="100%" style="border-collapse: collapse">
      <td rowspan="3" width="70%">
      <p align="center">
      <a target="_blank" href="super_1.jpg">
      <img border="0" src="image_1.jpg" name="MyImage"></a></p></td>
    
      <td align="center">
      <img border="0" src="thumb_1.jpg"
       onclick="document.MyImage.src='image_1.jpg';"></td>
    
      <td align="center">
      <img border="0" src="thumb_2.jpg"
       onclick="document.MyImage.src='image_2.jpg';"></td>
    
    </tr>
    <tr>
    
      <td align="center">
      <img border="0" src="thumb_3.jpg"
       onclick="document.MyImage.src='image_3.jpg';"></td>
    
      <td align="center">
      <img border="0" src="thumb_4.jpg"
       onclick="document.MyImage.src='image_4.jpg';"></td>
    </tr>
    </table>
    I've used "thumb" to reference the thumbnails, "image" to reference the mid-size, and "super" to reference the large XGA sized images. The 4th line of the code, the one with the "super_1.jpg" href is the one that's not working. I've tried all sorts of methods to get this to change but I'm too new to javascript and it's beyond me. But, I'm a fast learner.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    I'm not really good at JS either but i'll give it shot while i'm waiting for someone to look at my js problems

    Try using a function like this, so add this into the <head> of your document

    Code JavaScript:
    <script type="text/javascript">
    <!--
    function changeImage(new_image) {
     
    	var image = getElementById('MyImage');
    	image.src = new_image;
    }
    //-->
    </script>

    And change your markup to

    Code HTML4Strict:
    <table border="0" width="100%" style="border-collapse: collapse">
      <td rowspan="3" width="70%">
      <p align="center">
      <a target="_blank" href="super_1.jpg">
      <img border="0" src="image_1.jpg" id="MyImage"></a></p></td>
     
      <td align="center">
      <img border="0" src="thumb_1.jpg"
       onclick="changeImage('image_1.jpg');"></td>
     
      <td align="center">
      <img border="0" src="thumb_2.jpg"
       onclick="changeImage('image_2.jpg');"></td>
     
    </tr>
    <tr>
     
      <td align="center">
      <img border="0" src="thumb_3.jpg"
       onclick="changeImage('image_3.jpg');"></td>
     
      <td align="center">
      <img border="0" src="thumb_4.jpg"
       onclick="changeImage('image_4.jpg');"></td>
    </tr>
    </table>

    Using id is a much more stable way to get and modify elements using javascript, and where possible break up the code into functions so your markup is less bloated.


    Hope it helps,

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, but it didn't work.

    Actually the thumbnails do reset the value of MyImage and I don't have a problem there. The problem is with the line above it that trys to open a new window with "super_1.jpg". I tried all sorts of references to it but can't get it to change. If I add a "MyImage" statement to that line is doesn't change like it does on the next line.

  4. #4
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's another example:

    Code:
    <table border="0" width="100%" style="border-collapse: collapse">
    
      <td rowspan="3" width="70%">
      <p align="center">
      <a target="_blank" href="super_1.jpg" name="MyImage">
      <img border="0" src="super_1.jpg" name="MyImage" width="360" height="270"></td></a></p>
    
      <td align="center">
      <img border="0" src="thumb_1.jpg"
       onclick="document.MyImage.src='super_1.jpg';"></td>
    
      <td align="center">
      <img border="0" src="thumb_2.jpg"
       onclick="document.MyImage.src='super_2.jpg';"></td>
    </tr>
    <tr>
      <td align="center">
      <img border="0" src="thumb_3.jpg"
       onclick="document.MyImage.src='super_3.jpg';"></td>
    
      <td align="center">
      <img border="0" src="thumb_4.jpg"
       onclick="document.MyImage.src='super_4.jpg';"></td>
    </tr>
    </table>
    In this example I use the 4 thumbnails to reference the "super" image and display it to the left of the tumbnails in a limited 360x270 format. The "MyImage" name works fine and the correct image swaps every time I click on a thumbnail. However when I click on the larger image it is supposed to display a larger XHA image in a new window. It does this but it always displays image #1 and doesn't swap. So the first stage wiorks but the second doesn't.

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Oops..

    I missed out a keyword 'document'
    Code JavaScript:
    function changeImage(new_image) {
     
        var image = document.getElementById('MyImage');
        image.src = new_image;
    }
    This works.

  6. #6
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works to get the image displayed to the left of the table but my problem lies in getting the new page to display once that "left of ther table" image is clicked. It always brings up a new page but the image displayed is the larger version of image #1 regardless of which image is displayed in the left column of the table. For some reason the "name=MyImage" statement works in the <img> line but not in the <a href> line. I need a way to define the variable in the HREF statement that works.


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
  •