making an image appear using clip property

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • cameokid
    New Member
    • Feb 2008
    • 10
    #1

    making an image appear using clip property

    Can someone help me out with this.

    Here is what i am trying to do. I have an image of size 310x310. Initially i am displaying only 50x50 using clip property. Later using setTimeout property i am trying to get the entire image so that it looks like animation. But this doesn't happen with the code below

    [HTML]<html>
    <head>
    <style type="text/css">
    .img1
    {
    position:absolu te;
    clip:rect(0px 50px 50px 0px)
    }
    </style>
    <script type="text/javascript">
    function start() {
    var x=document.getE lementById("img 1");
    x.style.clip.ri ght+=10;
    x.style.clip.bo ttom+=10;
    if (x.style.clip.r ight<310)
    setTimeout("sta rt()",10);
    else return;
    }
    </script>
    </head>

    <body onLoad="start() ;">
    <p>The clip property is here cutting an image:</p>
    <p><img id="img1" class="img1" border="0" src="Kiva_Logo. jpg" width="310" height="310"></p>
    </body>

    </html>[/HTML]
    Last edited by acoder; Feb 20 '08, 09:54 AM. Reason: Added code tags
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      There's no clip.right/bottom. Set the whole clip each time. See this link. Don't forget the measurements (e.g. "px").

        Comment

        • cameokid
          New Member
          • Feb 2008
          • 10
          #3
          Sorry i was late in replying. Next time i would make it soon

          Thanks for the help

          The link was much useful. Here are some modifications that i made and its working fine

          [HTML]<html>
          <head>
          <style type="text/css">
          .img1
          {
          position:absolu te;
          clip:rect(0px 50px 50px 0px)
          }
          </style>
          <script type="text/javascript">
          var n=1;

          function start() {
          var x=document.getE lementById("img 1");
          var i=0;
          if (n<8) {

          switch(n)
          {
          case 1:
          x.style.clip="r ect(0px,50px,50 px,0px)";
          break;
          case 2:
          x.style.clip="r ect(0px,100px,1 00px,0px)";
          break;
          case 3:
          x.style.clip="r ect(0px,150px,1 50px,0px)";
          break;
          case 4:
          x.style.clip="r ect(0px,200px,2 00px,0px)";
          break;
          case 5:
          x.style.clip="r ect(0px,250px,2 50px,0px)";
          break;
          case 6:
          x.style.clip="r ect(0px,300px,3 00px,0px)";
          break;
          case 7:
          x.style.clip="r ect(0px,350px,3 50px,0px)";
          break;
          default:
          break;
          }

          setTimeout("sta rt()",200);
          n++;
          i++;
          }
          else {
          return;
          }
          }
          </script>
          </head>

          <body onLoad="start() ;">
          <p>The clip property used to cut the image:</p>
          <p><img id="img1" class="img1" border="0" src="Kiva_Logo. jpg" width="310" height="310"></p>
          </body>

          </html>

          [/HTML]
          But i need to optimize this code.

          I need to avoid switch statements and use a variable 'z' such that i have
          z=0;
          x.style.clip="r ect(0px,z,z,0px )" ;
          z++ ;

          hence i can increment the clipping pixel by pixel and increasing the speed would make it look like animation.

          But the above code(using variable) is not possible. I also tried using arrays and eval. It didn't work.

          Can you suggest any method to dynamically increase the clip attributes by using any variable or anything as such.


          Thanks for the help
          Last edited by acoder; Mar 5 '08, 09:52 AM. Reason: Added code tags

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              Try this:
              [code=javascript]x.style.clip="r ect(0px,"+(n*50 )+"px,"+(n*50)+ "px,0px)";[/code]

              Ps. please use [code] tags when posting code. Thanks!

                Comment

                • cameokid
                  New Member
                  • Feb 2008
                  • 10
                  #5
                  The code works perfect with this line

                  Code:
                  x.style.clip="rect(0px,"+(n*50)+"px,"+(n*50)+"px,0px)";
                  The variable should be enclosed between "+" signs when used as an attribute value. That's the lesson for me.


                  Thanks a lot.

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      Glad you got it working and a lesson learnt!

                        Comment

                        Previous template Next
                        Working...