| ポイント |
<![CDATA[
myIMG.filters[0].M11 = n11;
myIMG.filters[0].M12 = n12;
myIMG.filters[0].M21 = n21;
myIMG.filters[0].M22 = n22;
<img src="image.jpg" width="320" height="240" id="myIMG" style="filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')">
]]>
|
| 説 明 |
IE5.5以降ではマトリクスを使って画像の変形ができます。スタイルシートでprogid:DXImageTransform.Microsoft.Matrixを指定します。スクリプトでM11,M12,M21,M22プロパティに値を指定することで変形を行うことができます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>画像を変形させる</title>
<script language="JavaScript"><!--
n11 = 0;
n12 = 0;
n21 = 0;
n22 = 0;
function setM11(n)
{
n11 += n;
myIMG.filters[0].M11 = n11;
}
function setM12(n)
{
n12 += n;
myIMG.filters[0].M12 = n12;
}
function setM21(n)
{
n21 += n;
myIMG.filters[0].M21 = n21;
}
function setM22(n)
{
n22 += n;
myIMG.filters[0].M22 = n22;
}
// --></script>
</head>
<body>
<img src="image.jpg" width="320" height="240" id="myIMG" style="filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')">
<br>
M11：<a href="javaScript:setM11(0.01)">加算</a>｜
<a href="javaScript:setM11(-0.10)">減算</a><br>
M12：<a href="javaScript:setM12(0.01)">加算</a>｜
<a href="javaScript:setM12(-0.10)">減算</a><br>
M21：<a href="javaScript:setM21(0.01)">加算</a>｜
<a href="javaScript:setM21(-0.01)">減算</a><br>
M22：<a href="javaScript:setM22(0.01)">加算</a>｜
<a href="javaScript:setM22(-0.01)">減算</a><br>
</BODY>
</HTML>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
画像を変形させる