画像の表示範囲を指定する（クリッピング）


■動作ブラウザ　【 IE:4.0　 NN:6.0】
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × ○ - ○ ○ × × × × ○ - × -
Macintosh × ○ ○ ○ - × × × × ○ - - ×
UNIX - - - - - × × × × ○ - - -
Dreamcast - - - - - - - - - - × × -

ポイント document.myIMG.style.clip = "rect(0 "+cx+" "+cy+" 0)";
説　　明 クリッピング（指定範囲のみ表示／切り抜き）はスタイルシートプロパティのclipに表示範囲を指定します。表示範囲はrect(0 100 80 5)のように指定します。この座標指定の順序は「上、右、下、左」の順番ですので注意が必要です。またrect(〜)は文字列としてclipプロパティに代入する必要があります。
サンプル <html> <head> <title>画像の表示範囲を指定する（クリッピング）</title> <script language="JavaScript"><!-- function setClip(cx,cy) { document.myIMG.style.clip = "rect(0 "+cx+" "+cy+" 0)"; } // --></script> </head> <body> <a href="javaScript:setClip(320,240)">CLIP(320,240)</a><br> <a href="javaScript:setClip(160,240)">CLIP(160,240)</a><br> <a href="javaScript:setClip(80,60)">CLIP(80,60)</a><br> <img src="image.jpg" name="myIMG" style="position:absolute;"> </body> </html>
補足説明 なし

■サンプルスクリプトを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!
写真素材 PIXTA