SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    May 2002
    Location
    Oslo
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pictures & table cells

    I have this code which swaps images from one cell to another:

    <html>
    <head>

    <script type="text/javascript">

    function show_image(imageName,id)
    {
    document.images[id].src=document.images['img1'].src;
    document.images['img1'].src=imageName;

    }
    </script>

    <title>Test</title>
    </head>

    <body>

    <table border="1" width="49%">
    <tr>
    <td width="25%"><a href="#" onclick="show_image('pictures/crx.jpg','img2')"><img border="0" src="pictures/crx.jpg" width="125" height="84" name="img2" id="img2"></a></td>
    <td width="25%"><a href="#" onclick="show_image('pictures/civic.jpg','img3')"><img border="0" src="pictures/civic.jpg" width="125" height="84" name="img3" id="img3"></a></td>
    <td width="25%"><a href="#" onclick="show_image('pictures/nsx.jpg','img4')"><img border="0" src="pictures/nsx.jpg" width="125" height="84" name="img4" id="img4"></a></td>

    <td width="25%"><img border="0" src="pictures/clublogo.gif" width="345" height="214" name="img1" id="img1"></td>
    </tr>
    </table>

    </body>
    </html>


    The problem with this code is that if you click in the same picture twice it doesn't swap the images correct. Why???
    Last edited by Pompiuses; May 29, 2002 at 11:56.

  2. #2
    SitePoint Member
    Join Date
    May 2002
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pictures & table cells

    Your JavaScript changes the cell image but not the on click="show_image(this remains the same)" so the image swap will only work as you want once.
    I think it will work if you change the HTML for <a href... bit as well.
    Hope that helps if i get time I'11 try and send you a solution (bedtime - work in AM.)
    Pat C

  3. #3
    SitePoint Zealot
    Join Date
    May 2002
    Location
    Oslo
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm, not sure what you mean with changing the <a href - bit.......
    If I somehow could make the src-attribute in the image tag dynamic, not static, it would work. Meaning that when the html- page first loads, it loads the image in the src'tag in the html-code, but after a image swap the src-tag somehow get changed to the image you swap to.

    If you have a solution on this problem i would really appreciate it

  4. #4
    SitePoint Member
    Join Date
    May 2002
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a method that works. My orignal idea is longer and mmm.. not working.
    Hope it solves your problem. Pat

    <html>
    <title>Test</title>
    <head>
    <script language="JavaScript" >
    // Public Variables
    var imgs = new Array(4); // img_save
    var img_save;
    // Fuction init calles onLoad to initialise array.
    function init(i1,i2,i3,i4){ // save the initial display
    imgs[1] = i1; // initialise saving place for image info
    imgs[2] = i2;
    imgs[3] = i3;
    imgs[4] = i4;
    }
    // Function show_image - puts the image in correct cell
    function show_image(i,id){
    document.images[id].src=imgs[1]; // update clicked cell
    document.images['img1'].src=imgs[i]; // update big cell
    img_save = imgs[i]; // save cell 2 image
    imgs[i] = imgs[1]; // cell 2 takes image from cell 1
    imgs[1] = img_save; // cell 1 takes saved image pre cell 2
    }
    </script>
    </head>
    <body onLoad ="init('peach.gif','carrot.gif','grapes.gif','banana.gif')" >
    <table border="1" width="49%">
    <tr>
    <!-- Three small Cells -->
    <td width="25%"><a href="#" onclick="show_image(2,'img2')"><img border="0" src="carrot.gif" width="125" height="84" name="img2" id="img2"></a></td>
    <td width="25%"><a href="#" onclick="show_image(3,'img3')"><img border="0" src="grapes.gif" width="125" height="84" name="img3" id="img3"></a></td>
    <td width="25%"><a href="#" onclick="show_image(4,'img4')"><img border="0" src="banana.gif" width="125" height="84" name="img4" id="img4"></a></td>
    <!-- The Big Cell -->
    <td width="25%"><img border="0" src="peach.gif" width="345" height="214" name="img1" id="img1"></td>
    </tr>
    </table>
    </body>
    </html>
    Pat C

  5. #5
    SitePoint Zealot
    Join Date
    May 2002
    Location
    Oslo
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thank you !!!!!

    Thanks!!!! I REALLY appreciate your effort on this script. It works superb!!!!!!

    I've just one more question:
    Do you know if it works inn all browsers???

  6. #6
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no it will not, unless you put "this" where the image is, so it can reference the object.

    ie

    PHP Code:
    <script type="text/javascript">
    function 
    blah(obj)
    {
      
    obj.src='http://www.tripod.lycos.co.uk/common/navig/img/lycos.gif';
    }
    </script>

    <img src="http://www.tripod.lycos.co.uk/common/navig/img/tripod.gif" onclick="blah(this)" /> 
    Last edited by Andrew-J2000; May 31, 2002 at 00:29.

  7. #7
    SitePoint Zealot
    Join Date
    May 2002
    Location
    Oslo
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm, i'm not quite sure what you mean.... How would you combine your code with the code above?


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
  •