便利eelife Java Script

   戻る

レイヤ−に範囲を指定して見える部分を限定する。
(画像にクリップをかける)
Top    :  Width  :

Height : Left    :  




    このレイヤーの
    高さは400px
   幅は200pxです。



サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY >
<P>レイヤ−に範囲を指定して見える範囲を限定する。</P>
<FORM name="myFORM"><INPUT size="8" type="text" name="T_box" value="100">:Top<BR>
<INPUT size="8" type="text" name="W_box" value="200">:Width<BR>
<INPUT size="8" type="text" name="H_box" value="300">:Height<BR>
<INPUT size="8" type="text" name="L_box" value="0">:Left<BR>
<INPUT type="button" value="スタート" onclick="chg('xypos')"></FORM>
<FORM><INPUT type="button" value="200,200,350,0" onclick="act('xypos',200,200,350,0)">
 <INPUT type="button" value="100,200,200,100" onclick="act('xypos',100,200,200,100)">
 <INPUT type="button" value="0,200,400,0" onclick="act('xypos',0,200,400,0)"></FORM>
<DIV id="xypos" style="position : absolute ;
left : 390px;
top : 30px;
width : 200px;
height : 400px;
z-index : 1;
visibility : visible;
background-image : url(clip18.gif);
background-color : #ffffb0;
"><BR>
<BR>
<BR>
<BR>
    このレイヤーの<BR>
    高さは400px<BR>
   幅は200pxです。</DIV>

</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
function chg(n){Lyid=n;
C_Top = document.myFORM.T_box.value;
C_Width = document.myFORM.W_box.value;
C_Height = document.myFORM.H_box.value;
C_Left = document.myFORM.L_box.value;
act(Lyid,C_Top,C_Width,C_Height,C_Left);
}


function act(Lyid,C_Top,C_Width,C_Height,C_Left){
C_list ="rect("+ C_Top +"px,"+ C_Width +"px,"+ C_Height +"px,"+ C_Left +"px)"
document.getElementById(Lyid).style.clip = C_list;
}


// -->
</SCRIPT>
コメント
"rect("+ C_Top +"px,"+ C_Width +"px,"+ C_Height +"px,"+ C_Left +"px)"
C_Top : レイヤーのクリップされた領域の上辺の座標
C_Width : レイヤーのクリップされた領域の幅
C_Height : レイヤーのクリップされた領域の高さ
C_Left : 左辺の座標

C_list ="rect()でそれぞれの値を取得して
document.getElementById(Lyid).style.clipで表示します。
いろいろ数値を入力してどのように見えるか試してみると
一番良く解るでしょう。