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 3 of 3

Thread: picture display

  1. #1
    Regular Coder
    Join Date
    Jul 2005
    Location
    LA, California
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts

    picture display

    i know this is possible and if you could help me i would be most appreciated. http://www.hotpepper.6te.net and you will see that i have text down the middle with a picture on the left side i want it when you click and highlight the text it to change the pic on the left to that pic the text is discribing. thanks

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Home</title>
    <style type="text/css">
    <!--
    body {
    	background-color: #CCCCCC;
    }
    -->
    </style></head>
    
    <body>
    <table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
      <tr>
        <td width="16%" valign="bottom"><table width="100%" height="217" border="1" cellpadding="0" cellspacing="0">
          <tr>
    
            <td><img id="MyPic" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="200" height="143"></td>
            </tr>
        </table></td>
        <td width="56%" valign="top">
        <p align="center" onclick="document.getElementById('MyPic').src='http://www.vicsjavascripts.org.uk/StdImages/Two.gif';"    >Two</p>
        <p align="center" onclick="document.getElementById('MyPic').src='http://www.vicsjavascripts.org.uk/StdImages/Three.gif';"    >Three</p>
        <p align="center" onclick="document.getElementById('MyPic').src='http://www.vicsjavascripts.org.uk/StdImages/Four.gif';"    >Four</p>
        </td>
    
        <td width="28%">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>

    better still

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Home</title>
    <style type="text/css">
    <!--
    body {
    	background-color: #CCCCCC;
    }
    -->
    </style>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
    
    function SwapPic(id,img){
     document.getElementById(id).src=ImgPath+img;
    }
    //-->
    </script>
    
    </head>
    
    <body>
    <table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">
      <tr>
        <td width="16%" valign="bottom"><table width="100%" height="217" border="1" cellpadding="0" cellspacing="0">
          <tr>
    
            <td><img id="MyPic" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="200" height="143"></td>
            </tr>
        </table></td>
        <td width="56%" valign="top">
        <p align="center" onclick="SwapPic('MyPic','Two.gif');"    >Two</p>
        <p align="center" onclick="SwapPic('MyPic','Three.gif');"    >Three</p>
        <p align="center" onclick="SwapPic('MyPic','Four.gif');"    >Four</p>
        </td>
    
        <td width="28%">&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>
    Last edited by vwphillips; 07-31-2005 at 09:10 PM.

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Location
    LA, California
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks i used that bottom code and it works perfectly, is there a way so that when you click the image et the left it blows up to a larger image like image1_big.gif , image2_big.gif, ect. thanks


  •  

    Posting Permissions

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