一番簡単な画像置換の方法-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のタイトルを表示形式を変更»

このエントリーのトラックバックURL
https://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1321
トラックバック内容
» text-indent:-9999pxはSEOのスパムになるのかと対策について from N-Brid　- WEBクリエイティブ Labo.
懸念事項のような問題点については、ホームページをビジュアルなものとして制作しながら、SEO対策を施すということをすると必ず出てくる問題点だ。 ...
トラックバック時刻: 2007年7月26日 11:42
コメント

ファイル名は小文字だけに統一したほうがいいと思う…。

投稿者:Bar | 2007年2月22日 08:59

これは本当にすばらしいツールです。
いろいろとやろうとすると、cssでの表示が美しくなかったり、-9999pxなどとやると、罪悪感を感じていましたが、これらが一気に解決すると思うと、本当にこれは使える!!と実感できます。

このプログラムを実際に使用しましたが、ロールオーバーの画像(a)の後に、ロールオーバーが必要ない画像(b)が出てくると、(b)にマウスオーバーした際に、(a)に画像が入れ替わってしまう現象を確認しました。

ご報告までに。

投稿者:かわかわ | 2007年3月 2日 16:30

>Barさん

なんかそう言われると小文字のがいい気がしますね・・・

>かわかわさん

コメントありがとうございます。
あ、ホントですね。ロールオバーしてないところの挙動がおかしいです。
修正しときました。

ご指摘、感謝感謝です。

投稿者:西畑 | 2007年3月 2日 23:00

たびたび失礼いたします。
IE5、IE5.5以下ですと、うまく挙動しないんですね。

あれなくば、これなしですが・・・。

投稿者:かわかわ | 2007年3月23日 18:25

WEBでは、はじめまして。「Web標準の日々」喫煙室にて
突然声をかけさせて頂きました、新潟のつとむらです。

prototype.js無し版、素晴しいです。嬉しいです！！！

前VerのimageReplace.jsのおかげで大変助けて頂きました。
次のサイトで新Verも是非使用させて頂きたいと思います！

ちなみに、あの日は地震の影響で帰ることができませんでした。(^-^;

あの時は本当に突然ですみませんでした。
貴重なお話を聞かせて頂き、ありがとうございました！
また何かの機会がありましたら、宜しくお願いいたします。

投稿者:つとむら | 2007年9月17日 17:33

＞つとむらさん

地震でかえれなかったんですね。。。
台風に地震といろいろ大変でしたね。

新Verもまたご意見いただけたらと。

投稿者:西畑 | 2007年9月24日 00:52

ナビゲーションのロールオーバーの仕方は悩んでます。
CSSで-9999emとか使った画像置換はあまりよくないらしく、
どうしても画像に置き換えたい時にどうしたものかと思っておりましたが、
imageReplace.jsを使うとjavascriptを有効にしていなくても関係ないんでしょうか？
どんなデメリットがあるか知りたいです。

最近はみんなどんな風に画像置換するのでしょうか？

javascriptもたくさん入れるとエラーが起こる可能性があるので、ちょっと恐々試してみます。

投稿者:ume | 2007年11月18日 23:51

＞umeさん

コメントありがとうございます。

個人的な意見を言いますと、画像置換に完璧な手法は存在しません。それぞれにデメリットがあり、どのデメリットを許容できるかで選択の幅が狭まってくると思います。

CSSで-9999emの手法も画像がoffでCSSがonという非常にニッチな環境で、ちゃんと情報が閲覧できません。
ここを許容できればこの手法で問題ないと思います。事実、この手法が一番よく使われています。

imageReplace.jsは様々な環境で目的の文字情報は閲覧できるよう作成されています。JavaScriptライブラリですのでJavaScriptがOFFの環境では画像置換は置き換えませんが、要素内に記述されている文字などはちゃんと閲覧できます。
また、他のライブラリとのバッティングしないように設計されているので、相性の問題でエラーが出ることはありません。

こんな感じですね。参考になればと

投稿者:西畑一馬 | 2007年11月24日 13:02

いろいろとありがとうございます。
imageReplace.jsをナビゲーション横並び、ヘッダーの下
横サイドバーにも縦並びで入れたところ、表示が遅くなります。
一度テキストだけが表示されてから後から画像が表示される感じです。
あまりきれいではないのですが・・・・・
一つだけにした方がいいのでしょうか？

CSSと比べてみたら、CSSの方が表示が速いです。
CSSを切っているとレイアウトも崩れますので、ONを前提に考えておりますが、
どちらにするかこのあたり悩むところです。

Q&Aの効果的な見せ方もまた教えてくださいね。

投稿者:ume | 2008年1月31日 02:51

>umeさん

imageReplace.jsはすべてが読み込み終わってから表示されるので、どうしも表示が遅くなってしまいますね。

投稿者:西畑一馬 | 2008年2月 6日 21:47

初めまして
検索してたらこのサイトに辿り着きました
この画像置換方法、素晴らしいですね！
当方、WEBデザイナーをやっておりまして
お客様のサイトにこの方法を取り入れたいのですが・・・
それって大丈夫なんでしょうか？？？

ちなみに、ソースの書き換え等は行いません。
そのまま使わせて頂きたいと思っております。

投稿者:masa | 2008年8月19日 11:10

＞masaさん

MITライセンスで配布しておりますので、
ご自由に利用していただいて大丈夫ですよ。
ソースの書き換えをしても問題ありません。

投稿者:西畑一馬 | 2008年8月20日 01:53

ありがとうございます
ありがたく使わせて頂きますー！

投稿者:masa | 2008年8月20日 13:17

西畑さん はじめまして。

大変ありがたく使わせていただいております。


さてさて、
気になったことなのですが、
一時期 画像が 置換しないことがありまして、
画像自体のリネームをすると しばらくは置換されるようになります。

しかしまた しばらく経つと置換しなくなる、ということが
ちょくちょくありました。
（intel MAC、Safari, Firefoxにて）

キャッシュを消すと部分的に置換されるようになったりなんだりで
何とも不安定だったのですが、
ふと思い立ち ファイル名を短めにリネームしたところ、
それ以後 正しく表示されるようになりました。

元のファイル名も side-menu-base_01a.gif とか、
そのくらいの長さだったのですが、それって何か関係あるものですか？

投稿者:テンダー | 2009年6月 3日 15:29

良いJavaScriptをありがとう！

ところで、記載の通りに
Ajax
という書き方をして実装してみたんですが、なんでなのかな？？、IE7だと位置がインデントされるんです。。
サイドバーにまずは実装したんですよ。そすると30～40pixelくらいかなぁ、どれも実際の位置よりも右にずれて配置されてしまうんです。
だけれども、現在地ページはaタグ無しにしてロールオーバー画像だけ表示させてますが、このほうはインデントされず正常な位置です。aタグが入ったとたんにこうなっちゃうってのは何なんでしょうか。もし何かご存じでしたらアドバイス頂けたらとってもウレしいです。

ちなみに、phpのif文で、
「本ページがこのディレクトリのページであるかどうか？」
の判定をし、
falseならばaタグRollOver型のソースを表示せよ
trueならばaタグ入れず、spanタグの非RollOver型ソースを表示せよ
というようにやってるんですが、まさかphp記述が入ったとたんにダメになるということはないと思いますし。。

投稿者:匿名 | 2010年3月21日 16:28

これは素晴らしいアイデアですね！！
サイトにつけてみました。

ただ、画像が表示されるのが極めて遅いのでそこだけは改善しないといけません。Dreamweaverでbodyタグにpreloadが入るように何か効率的に先読みさせるなどして表示を普通のスピードにさせることができないでしょうか。
全て表示されているのにGlobalNavigationやサイドバーリンクナビゲーション、その他フッターのナビゲーションなど、画像のリンク部分だけが全て表示されない時間が相当長いので、遅延サイトだと思われてしまっていて困っています。

投稿者:スピカ | 2010年4月13日 11:04
コメントを投稿