2008年04月28日

画像のズームアップ 初歩編

スポンサード リンク


サンプルソース

<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
<!--
/*画像を入れているレイヤー*/
#Layer1{
position : absolute;/*画面の上,左からの座標どうりの位置(絶対位置)*/
top : 50px;    /*画面の上からの位置*/
left : 10px;    /*画面の左からの位置*/
}
-->
</STYLE>

<SCRIPT language="JavaScript">
<!--
var
W=300;   //拡大した画像の幅
H=W;      //拡大した画像の高さ
timer=1; //ズームアップの速さ
zoom_W=0;    //ズームアップの初期値
zoom_H=0;
flag=0;    // 0なら元の画像、1ならズームアップ画像
intvl=2;    //拡大する数値 1なら1px、2なら2px、ずつ拡大

//ズームアップ
function resize(Name) {
if(flag==1){ closeImage(Name);return;}
IMG_W = document.images[Name].width;   //元の画像の幅 取得
IMG_H = document.images[Name].height;  //元の画像の高さ 取得
resizeImage(Name);
}

//ズームアップの繰り返し
function resizeImage(Name) {
zoom_W += intvl;
zoom_H += intvl;
document.images[Name].width = IMG_W+zoom_W;   //幅
document.images[Name].height =IMG_H+zoom_H;   //高さ
if(IMG_H+zoom_H>= H){document.images[Name].title ="元にもどします。";flag = 1;return;}
setTimeout("resizeImage('"+Name+"')",timer);
}

//元の画像にもどします
function closeImage(Name) {
document.images[Name].width = IMG_W;   //元の画像の幅に戻します
document.images[Name].height = IMG_H;  //元の画像の高さに戻します
document.images[Name].title ="ズームアップします";
flag=0;
zoom_W=0;
zoom_H=0;
}

// -->
</script>
</HEAD>
<body>
<DIV id="Layer1"><IMG src="******" width="80" height="80" border="0" id="gazou" name="gazou" alt="ズームアップします" onclick="resize('gazou')"></DIV>

</body></HTML>

ひとこと、二言

<IMG src="******"の******の 所は御自分の画像のURLをいれてください。画像は 縦,横比が違うときれいに拡大できません
青い文字の部分は、必要に応じて書き換えできます。
今回はソースを分かり易くするため縦,横 同じ大きさのズームアップしかできませんが
つぎは汎用性のあるズームアップを作ってみます。

posted by javaScript at 16:37 | 大阪 | 画像 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。