目次

概要

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>

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2010-10-25 (月) 16:14:24 (5013d)