www.webdeveloper.com
Results 1 to 3 of 3

Thread: Image Swapping

  1. #1
    Join Date
    Jul 2004
    Location
    California
    Posts
    1

    Image Swapping

    How can I make multiple thumbnail images show a full-size image in another table cell?

    Example site: http://www.allamericanrejects.com/photos/index.asp

    No mouseOVer/rollOvers

  2. #2
    Join Date
    Jul 2004
    Location
    Iowa
    Posts
    3
    Try the following.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled</title>

    <script language="JavaScript" type="text/javascript">
    <!--
    // THIS CHANGES PICTURES WHEN LEFT TABLE CELLS ARE CLICKED
    function changepicture(newpic){
    document.getElementById('targetcell').innerHTML="<img src='"+newpic+"' />";
    }

    //-->
    </script>

    </head>
    <table summary="">
    <tr>
    <td onclick="changepicture('firstpic.jpg')"><img src="firstpic_th.jpg" alt=""></td>
    <td rowspan="4" id="targetcell"></td>
    </tr>
    <tr>
    <td onclick="changepicture('secondpic.jpg')"><img src="secondpic_th.jpg" alt=""></td>
    </tr>
    <tr>
    <td onclick="changepicture('thirdpic.jpg')"><img src="thirdpic_th.jpg" alt=""></td>
    </tr>
    <tr>
    <td onclick="changepicture('fourthpic.jpg')"><img src="fourthpic_th.jpg" alt=""></td>
    </tr>
    </table>

    <script language="JavaScript" type="text/javascript">
    <!--
    //SETS THE INITIAL PICTURE. PUT THIS SOMEWHERE AFTER THE TABLE SO IT CAN LOAD FIRST
    document.getElementById("targetcell").innerHTML="<img src='firstpic.jpg' />";
    //-->
    </script>

    </body>
    </html>

  3. #3
    Join Date
    Jul 2003
    Location
    Boston Area, Massachusetts
    Posts
    3,489
    Welcome to the forums.

    The previous suggestion is inaccessible; it will not work when JavaScript isn't available.

    Instead use:
    Attached Files Attached Files

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles