エラスティックレイアウトでイメージを自動で拡大する方法

2007年2月28日

文字サイズを拡大したときにレイアウト幅も伸縮するエラスティックレイアウトの手法は以前ご紹介しましたが、ヘッダーなどでイメージを使った際はイメージは伸縮しないのであまり使えないなと思われているかと思います。

そこで今回は文字サイズを変更してイメージも拡大する効果を得れるライブラリｓｗIRをご紹介します。

ｓｗIRはFLASHとJavascriptを利用した様々なエフェクトをimgに与えれる優れものです。今回はエラスティックレイアウトの画像に対応する部分だけをご紹介します。

使い方はいたって簡単です。まずTOPページでダウンロードできるswfIRを解凍し、サーバーの同一フォルダにswfir.jsとswfir.swfをアップロードします。そしてswfir.jsを読み込んでJavascriptで効果を記述します。以下はheader内に記述した例です。

<script type="text/javascript" src="swfir.js"></script>
<script type="text/javascript">
window.onload = function(){
elastic = new swfir();
elastic.specify('src', '/swfir.swf');
elastic.specify('elasticity', 'true');
elastic.swap('img');
}
</script>

サンプルdemo

画像が拡大した時は解像度が低くなり、画質が低下するのはネックですが、レイアウト崩れを起こすよりはマシですよね。

※追記
画像の伸縮は画像のwidthをemで指定することで解決します。エラスティックレイアウトのみに対応させる場合はこのライブラリを使用するよりも、画像のwidthをemで指定するほうが効率的です。このライブラリのエフェクトも同時に使うときなどはこのエントリーの方法でご紹介した画像伸縮を使えば良いかと思います。