Web Analytics Made Easy -
StatCounter picture display - CodingForum

Announcement

Collapse
No announcement yet.

picture display

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    There are 3 kinds of ppl those who can count and those who cant
    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    Script-Megafest.com Coming Oh so very soon

  • #2
    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; Jul 31, 2005, 04:10 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

    Comment


    • #3
      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
      -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
      There are 3 kinds of ppl those who can count and those who cant
      -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
      Script-Megafest.com Coming Oh so very soon

      Comment

      Working...
      X