JavaScriptによる画像縮小
http://extstrg.asabiya.net/pukiwiki/index.php?JavaScript%A4%CB%A4%E8%A4%EB%B2%E8%C1%FC%BD%CC%BE%AE目次
概要 †
HTML表示段階で画像のリサイズを行うJavaScript。
IMGタグにname属性を設定し、HTML読み込みの最後にname属性を取得してリサイズを行う。
このため、縮小を行いたくない画像にはname属性を付けない(もしくは、img-resize以外のname属性を付ける)ことで縮小処理の対象外とすることができる。
HTML部(IMGタグ) †
- 縮小する場合
<IMG src="hogehoge.jpg" name="img-resize">
- 縮小しない場合
<IMG src="hogehoge.jpg">
JavaScript部 †
- サイズの指定
「var maxWidth」に横幅を指定する
- name属性の指定
「document.getElementsByName」のパラメータで指定する
<script type="text/javascript"> //<![CDATA[ var maxWidth = 50; window.onload = function(){ var elements = document.getElementsByName("img-resize"); for(i=0;i<elements.length;i++){ if(elements[i].width > maxWidth){ elements[i].width = maxWidth; } } } //]]> </script>
Last-modified: 2010-10-25 (月) 16:14:24 (5111d)