JavaScript ガンマン



JavaScriptでガンマンを動かしてみました。
以下の記述をあなたのHTMLにコピってみてね。

ガンマンの画像(Gunman.gif)を
同じフォルダにおいてください

(IE5.5 と NN4 のみ動作確認済み)

■JavaScriptガンマン ソース
<layer id=Brd style="HEIGHT: 75px; WIDTH: 60px;">
<DIV id=Brd_IE 
     style="position:absolute; TOP=50; LEFT=20;HEIGHT: 75px;WIDTH: 60px;">

  <A HREF="../index.html">
   <IMG src="./Gunman.gif" ALT="ガンマンHOMEへ" HEIGHT=75 WIDTH=60 BORDER=0>
  </A>

</DIV>
</layer>

<SCRIPT LANGUAGE="JavaScript">
<!--
  NS = (document.layers) ? 1 : 0;
  IE = (document.all) ? 1: 0;

  self.onError=null;
  whichIt = null;

  diffX = 5;
  diffY = 0;
  direction = "Right";

  function Branding() {

    if(IE) {

      if( document.all.Brd_IE.style.pixelLeft > document.body.scrollLeft + document.body.clientWidth - 100 ) {

          document.all.Brd_IE.style.pixelLeft = document.body.scrollLeft + document.body.clientWidth - 100;

          if ( direction == "Right" ) {
              diffX = 0;
              diffY = 5;
              direction = "Down";
          }
      }

      if( document.all.Brd_IE.style.pixelTop > document.body.scrollTop + document.body.clientHeight - 100 ) {

          document.all.Brd_IE.style.pixelTop = document.body.scrollTop + document.body.clientHeight - 100;

          if ( direction = "Down" ) {
              diffX = -5;
              diffY = 0;
              direction = "Left";
          }
      }


      if( document.all.Brd_IE.style.pixelLeft < document.body.scrollLeft + 20 ) {

          document.all.Brd_IE.style.pixelLeft = document.body.scrollLeft + 20 ;

          if ( direction == "Left" ) {
         
              diffX = 0;
              diffY = -5;
              direction = "Up";
          }
      }

      if( document.all.Brd_IE.style.pixelTop < document.body.scrollTop +50 ) {

          document.all.Brd_IE.style.pixelTop = document.body.scrollTop +50;

          if (direction == "Up" ) {
              diffX = 5;
              diffY = 0;
              direction = "Right";
          }
      }

      document.all.Brd_IE.style.pixelLeft += diffX;
      document.all.Brd_IE.style.pixelTop  += diffY;

    }

    if(NS) {

      if( document.Brd.left > self.pageXOffset + self.innerWidth - 100 ) {

          document.Brd.left = self.pageXOffset + self.innerWidth - 100;

          if ( direction == "Right" ) {
              diffX = 0;
              diffY = 5;
              direction = "Down";
          }
      }

      if(  document.Brd.top > self.pageYOffset + self.innerHeight - 100 ) {

           document.Brd.top = self.pageYOffset + self.innerHeight - 100;

          if ( direction = "Down" ) {
              diffX = -5;
              diffY = 0;
              direction = "Left";
          }
      }

      if( document.Brd.left < self.pageXOffset + 20 ) {

          document.Brd.left = self.pageXOffset + 20;

          if ( direction == "Left" ) {
         
              diffX = 0;
              diffY = -5;
              direction = "Up";
          }
      }

      if( document.Brd.top < self.pageYOffset +50 ) {

          document.Brd.top = self.pageYOffset +50;

          if (direction == "Up" ) {
              diffX = 5;
              diffY = 0;
              direction = "Right";
          }
      }

      document.Brd.left += diffX; 
      document.Brd.top  += diffY;
    }

  }

  if(NS || IE) action = window.setInterval("Branding()",1);

//end -->
</SCRIPT>