ホーム >>> HTML整理ノート

画像clipの応用 2

タイトル画像を








Sample Source......................................................................>>>

<SCRIPT language="JavaScript"><!--
var flg = true;         //表示するか、消えるかを切り替えるフラグ変数
var cTop,cRight,cBottom,cLeft;          //上、右,下、左のクリップ領域
function Start(){
  if(flg)ClipShow();  //画像を表示
  else ClipHide();   //画像を隠す
}
//・・・・・・・・・・・・・・(画像を表示)・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
function ClipShow(){            //表示を開始
  cTop = 54;
  cRight = 246;
  cBottom = 62;
  cLeft = 234;
  
  PIC.style.clip = "rect(" + cTop + " " + cRight + " " + cBottom + " " + cLeft + ")";
  PIC.style.visibility = "visible";
  BT.disabled = 1;              //ボタンを無効にする
  flg = false;
  
  setTimeout("Show1()",1000);
}
function Show1(){
  cRight += 2;
  cLeft -= 2;
  if(cRight <= 480){
    PIC.style.clip = "rect(" + cTop + " " + cRight + " " + cBottom + " " + cLeft + ")";
    setTimeout("Show1()",20);
  }else Show2();
}
function Show2(){
  cTop -= 1;
  cBottom += 1;
  if(cTop >= 0){
     PIC.style.clip = "rect(" + cTop + " " + cRight + " " + cBottom + " " + cLeft + ")";
     setTimeout("Show2()",20);
  }else{
    BT.innerText = "隠す"; 
        BT.disabled = 0;                        //ボタンを有効にする   
  }
}
//・・・・・・・・・・・・・・・・・(画像を隠す)・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
function ClipHide(){    //隠すを開始
  BT.disabled = 1;                      //ボタンを無効にする
  Hide1(); 
}
function Hide1(){
  cTop += 1;
  cBottom -= 1;
  if(cTop <= 54){
     PIC.style.clip = "rect(" + cTop + " " + cRight + " " + cBottom + " " + cLeft + ")";
     setTimeout("Hide1()",20);
  }else Hide2();
}
function Hide2(){
  cRight -= 2;
  cLeft += 2;
  if(cRight >= 240){
     PIC.style.clip = "rect(" + cTop + " " + cRight + " " + cBottom + " " + cLeft + ")";
     setTimeout("Hide2()",20);
  }else{
    BT.innerText = "表示する"; 
        BT.disabled = 0;                        //ボタンを有効にする
        flg = true;   
  }
}
//--></SCRIPT>
</head>

<P>タイトル画像を <button id="BT" onclick="Start()">表示する</button> </P> 
<P><IMG id="PIC" style="position:absolute;top:180;left:230;visibility:hidden"
   src="../../images/ban/home_aut.gif" width="480" height="116" border="0">
</P>