TOP
>
JavaScript
>
一番簡単な画像置換の方法-imageReplace.js-
画像置換は設置がややこしく。
デメリット・メリットの切り分けが困難です。
そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。
設定は簡単head要素内にimageReplace.jsを読み込むだけ。
<script type="text/javascript" src="./imageReplace.js"></script>
あとは、画像置換したい要素にclass属性に『imageReplace』と記述しスペースを空けて『置換する画像名』、『ロールオーバーする画像名』を記述します。
例えばこんな感じに。
<a class="imageReplace ajax_a.gif ajax_b.gif" href="/ajax/">Ajax</a>
『ロールオーバーする画像名』はロールオーバーの必要なければ入れなくても問題ないです。
画像までのパスが遠い場合はライブラリ内の14行目のImagesDirに画像までのパスを書いておけばclassはファイル名のみの記述で大丈夫です。
これで画像置換について迷う心配はもうないです。
MITライセンスで配布しますのでどしどし使ってください。
バグとかもどんどんご指摘ください。
修正(2007/8/20)
- prototype.jsなしで動作するように修正しました。
修正(2007/3/2)
画像未指定がある場合のロールオーバーの挙動を修正しました。
ご指摘ありがとうございます。
画像置換エントリー
関連エントリー
アルファ画像を扱うalphafilter.jsライブラリ
AjaxやJavaScriptのライブラリ