Web Analytics Made Easy -
StatCounter image help - CodingForum

Announcement

Collapse
No announcement yet.

image help

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • image help

    i am using this code
    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='';
    
    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="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>
    so that when you click the text it changes the pic, is there a way so that when you click the image et the left it blows up to a larger image? thanks alot
    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    There are 3 kinds of ppl those who can count and those who cant
    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
    Script-Megafest.com Coming Oh so very soon

  • #2
    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    // store a larger vesion of the image in diectory LargeImages
    // and do not specify the width and height of the target image
    
    var ImgPath='LargeImages/';
    
    function SwapPic(id,img){
     document.getElementById(id).src=ImgPath+img;
    // or if you must
     document.getElementById(id).width=500;
     document.getElementById(id).height=500;
    
    
    }
    
    //-->
    </script>
    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 tried it and thats not exactly wut i meant hopefully this will clafify it more:
      Last edited by Al_90; Aug 1, 2005, 12:35 PM.
      -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
      There are 3 kinds of ppl those who can count and those who cant
      -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
      Script-Megafest.com Coming Oh so very soon

      Comment


      • #4
        any1 plz this is urgent
        -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
        There are 3 kinds of ppl those who can count and those who cant
        -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
        Script-Megafest.com Coming Oh so very soon

        Comment


        • #5
          Sorry dont understand

          but you can change any image with ang image using the code I posted

          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='';
          
          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" onclick="SwapPic('MyPic2','http://www.vicsjavascripts.org.uk/StdImages/Zero.gif');" ></td>
                  </tr>
              </table></td>
              <td width="56%" valign="top">
              <p align="center" onclick="SwapPic('MyPic','http://www.vicsjavascripts.org.uk/StdImages/Two.gif');">Two</p>
              <p align="center" onclick="SwapPic('MyPic','http://www.vicsjavascripts.org.uk/StdImages/Three.gif');">Three</p>
              <p align="center" onclick="SwapPic('MyPic2','http://www.vicsjavascripts.org.uk/StdImages/Four.gif');">Four</p>
              </td>
          
              <td width="28%">&nbsp;</td>
            </tr>
          </table>
          <img id="MyPic2" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="400" height="400"></body>
          </html>
          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


          • #6
            ok, lets say i clicked "two" in the middle of the page, the image on the left should show a 2, correct, ok, now i click on the 2 image in the left and i want it to open another image that is the same image but in larger quality, i hope you understand this
            -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
            There are 3 kinds of ppl those who can count and those who cant
            -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
            Script-Megafest.com Coming Oh so very soon

            Comment


            • #7
              Try this website. I think it is what you are looking for. You can just change it to onclick instead of onmouseover.

              http://www.javascriptkit.com/script/...ifferent.shtml
              Get Mozilla Firefox

              Comment


              • #8
                yes thats it, becasue my knowledge of javascript is very low, could you fix my code so that it works? much thanks
                -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
                There are 3 kinds of ppl those who can count and those who cant
                -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
                Script-Megafest.com Coming Oh so very soon

                Comment


                • #9
                  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='';
                  
                  function SwapPic(id,img){
                   document.getElementById(id).src=ImgPath+img;
                  }
                  function warp(){
                  window.location=gotolink
                  }
                  // WHAT GOES HERE SO WHEN THE IMAGE IS CLICKED IT OPENS ANOTHER PIC????
                  var gotolink=""
                  //-->
                  </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><a href="#"onClick="javascript:window.open('javascript:warp()', 'open', 'width=860 height=645, scrollbars=0')"><img id="MyPic" src="one.gif" width="200" height="143"></a></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>
                  ok i played around with it, but im stuck on 1 part read wut after the // thanks
                  -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
                  There are 3 kinds of ppl those who can count and those who cant
                  -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
                  Script-Megafest.com Coming Oh so very soon

                  Comment


                  • #10
                    any1?
                    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
                    There are 3 kinds of ppl those who can count and those who cant
                    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
                    Script-Megafest.com Coming Oh so very soon

                    Comment


                    • #11
                      This is what i think you want:

                      NOTE: It is activated on Mouseover, it can be changed to onclik if you wish

                      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-Language" content="en-gb">
                      <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
                      <title>Home</title>
                      <style type="text/css">
                      <!--
                      body {
                      	background-color: #CCCCCC;
                      }
                      -->
                      </style>
                      <script>
                      
                      /*Rollover effect on different image script-
                      By JavaScript Kit (http://javascriptkit.com)
                      Over 200+ free scripts here!
                      */
                      
                      function changeimage(towhat,url){
                      if (document.images){
                      document.images.targetimage.src=towhat.src
                      gotolink=url
                      }
                      }
                      function warp(){
                      window.location=gotolink
                      }
                      
                      </script>
                      <script language="JavaScript1.1">
                      var myimages=new Array()
                      var gotolink="#"
                      
                      function preloadimages(){
                      for (i=0;i<preloadimages.arguments.length;i++){
                      myimages[i]=new Image()
                      myimages[i].src=preloadimages.arguments[i]
                      }
                      }
                      
                      
                      preloadimages("image1.gif","image2.gif","image3.gif","image4.gif","image5.gif")
                      </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><a href="javascript:warp()"><img src="plane0.gif" name="targetimage" border=0></a></td>
                              </tr>
                          </table></td>
                          <td width="56%" valign="top">
                          <p align="center">
                          <a href="image1link.htm" onMouseover="changeimage(myimages[0],this.href)">Image 1</a>
                      <br><a href="image2link.htm" onMouseover="changeimage(myimages[1],this.href)">Image 2</a>
                      <br><a href="image3link.htm" onMouseover="changeimage(myimages[2],this.href)">Image 3</a>
                      <br><a href="image4link.htm" onMouseover="changeimage(myimages[3],this.href)">Image 4</a>
                      <br><a href="image5link.htm" onMouseover="changeimage(myimages[4],this.href)">Image 5</a></td>
                      
                          <td width="28%">&nbsp;</td>
                        </tr>
                      </table>
                      </body>
                      </html>
                      Get Mozilla Firefox

                      Comment


                      • #12
                        yes this is what i want except i dont want a link on the words only the picture, becuase the way you have it if i were to click on the text it would open the page, and i dont want that, thanks
                        Last edited by Al_90; Aug 5, 2005, 12:41 PM.
                        -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
                        There are 3 kinds of ppl those who can count and those who cant
                        -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
                        Script-Megafest.com Coming Oh so very soon

                        Comment


                        • #13
                          c'mon guys this musnt b 2 hard
                          -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
                          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