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>