読者です 読者をやめる 読者になる 読者になる

Carpe Diem

備忘録。https://github.com/jun06t

画像の拡大縮小ボタン

PHPの方は表示する際にリサイズして~という流れでした。 JavaScriptはブラウザ側の操作を受け付けてくれるので、ユーザが自分で拡大、縮小したいボタンも用意できます。 何度も繰り返すと計算の過程でアスペクト比が狂うこともありますが、そこまで繰り返し拡大縮小することもないでしょう。またサイズのリセットもできるので、アスペクト比が狂ったらそこで修正すれば良いと思います。 では以下コードです。 <HEAD> <SCRIPT language="JavaScript"> var i=0; timeID=0; function kakudai(){ var xw =document.rfq.height; var yh =document.rfq.width; for (i=0;i<10;i++){ w=xw*(1+0.1*i); h=yh*(1+0.1*i); document.rfq.height=w; document.rfq.width=h; } } function shuku(){ var xw =document.rfq.height; var yh =document.rfq.width; for (i=0;i<10;i++){ w=xw*(1-0.05*i); h=yh*(1-0.05*i); document.rfq.height=w; document.rfq.width=h; } } </SCRIPT></HEAD> <BODY> <form> <input type="button" value="縮小" onClick="shuku()"> <input type="button" value="拡大" onClick="kakudai()"> </form> <IMG src="004a.gif" name="rfq"> </BODY> ソース先のコピペです。拡大率・縮小率は+、ーの部分を修正すれば出来ます。 document.name属性.height現在の大きさを、 document.name属性.naturalHeight画像本来の大きさを取得できます。 これらを使えば簡単に拡大縮小できますし、元の大きさにもすぐに戻せます。 ソース: http://popup.tok2.com/home2/yosiaki/C20.html