画像の表示範囲を指定する

■動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows ○ - ○ ○ ○ × ○
Macintosh × ○ ○ - - × ○
UNIX - - - - - × ○

解　　説 　画像の表示範囲を指定するにはスタイルシートのclipに文字列として表示範囲を指定します。範囲指定の順番は上、右、下、左となっているので注意が必要です。また、クリッピング範囲を元に戻す場合Mac+IEではサンプルのように指定すると画像が消えてしまうので、「document.images[imgName].style.clip = "auto"」のように指定する必要があります。
コード <html> <head> <title>画像の表示範囲を指定する</title> <script language="JavaScript"> <!-- imgName = "myIMG"; //　クリッピングする画像名 function setClip(x1,y1,x2,y2) { document.images[imgName].style.clip = "rect("+y1+" "+x2+" "+y2+" "+x1+")"; } function resetClip() { document.images[imgName].style.clip = "rect(auto,auto,auto,auto)"; } // --></script> </head> <body> <a href="javascript:setClip(10,10,150,90)">(10,10,150,90)に設定</a><br> <a href="javascript:resetClip()" >元に戻す</a><br> <img src="image.jpg" width="180" height="120" name="myIMG" style="position:absolute;"><br> </body> </html>

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