一番簡単な画像置換の方法-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)

修正(2007/3/2)

画像未指定がある場合のロールオーバーの挙動を修正しました。
ご指摘ありがとうございます。

画像置換エントリー

  1. 画像置換
  2. 画像置換でメニューを作る
  3. 画像置換に関する考え方
  4. BIR-もうひとつの画像置換
  5. 一番簡単な画像置換の方法-imageReplace.js-

関連エントリー

アルファ画像を扱うalphafilter.jsライブラリ
AjaxやJavaScriptのライブラリ

スポンサードリンク

«BIR-もうひとつの画像置換 | メイン | wordpressのタイトルを表示形式を変更»