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

clip　切り抜き.

clip:(値)
・要素を矩形に切り抜く。切り取られた部分は透明になる。
・position:absolute／fixedが設定されている要素でないとclipは有効にならない。
・(値)
　auto ･･･ ･･･(初期値）切り抜かない
　rect(要素の左上原点からの上辺、右辺、下辺、左辺への距離)
　　*数値を半角スペースで区切る(例)clip:rect(1cm 8cm 3cm 2cm)

Sample

↓は元画像、左はclip:rect(1cm 6cm 4cm 2cm)に切り抜いたもの。
　











Scriptプロパティ＜clip＞

↑画像の自動clipを

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

<script language="JavaScript"><!--
var flg = 1;
var timerID;
function GoStop(){
　if(bt.innerText == "開始"){
        timerID = setInterval("ClipGo()",1000);
        bt.innerText = "停止";
　}else{
        clearInterval(timerID);
        pic.style.clip = "rect(0 256 192 0)";;
        bt.innerText = "開始";
　}
}

function ClipGo(){
        if(flg == 1)pic.style.clip = "rect(0 80 100 0)";
        else if(flg == 2)pic.style.clip = "rect(0 170 100 80)";;
        else if(flg == 3)pic.style.clip = "rect(0 256 100 170)";
        else if(flg == 4)pic.style.clip = "rect(100 80 192 0)";
        else if(flg == 5)pic.style.clip = "rect(100 170 192 80)";
        else pic.style.clip = "rect(100 256 192 170)";

        flg ++;
        if(flg > 6)flg = 1;
}
//--></script>
</head>
<body>

<img id="pic" style="position:absolute" src="../../images/cut/sakura.gif" 
　　　width="256" height="192" border="0">　
<img src="../../images/cut/sakura.gif" width="256" height="192" border="0"
　　 style="position:absolute;top:9cm;left:13cm;clip:rect(1cm 6cm 4cm 2cm)";>

<h5>Scriptプロパティ＜clip＞</h5>
<p>↑画像の自動clipを<button id="bt" onclick="GoStop()">開始</button></p>