一番簡単な画像置換の方法-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のライブラリ
スポンサードリンク
«BIR-もうひとつの画像置換 | メイン | wordpressのタイトルを表示形式を変更»
- このエントリーのトラックバックURL
- https://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1321
- トラックバック内容
-
» text-indent:-9999pxはSEOのスパムになるのかと対策について
from N-Brid - WEBクリエイティブ Labo.
懸念事項のような問題点については、ホームページをビジュアルなものとして制作しながら、SEO対策を施すということをすると必ず出てくる問題点だ。 ...
ファイル名は小文字だけに統一したほうがいいと思う…。
これは本当にすばらしいツールです。
いろいろとやろうとすると、cssでの表示が美しくなかったり、-9999pxなどとやると、罪悪感を感じていましたが、これらが一気に解決すると思うと、本当にこれは使える!!と実感できます。
このプログラムを実際に使用しましたが、ロールオーバーの画像(a)の後に、ロールオーバーが必要ない画像(b)が出てくると、(b)にマウスオーバーした際に、(a)に画像が入れ替わってしまう現象を確認しました。
ご報告までに。
>Barさん
なんかそう言われると小文字のがいい気がしますね・・・
>かわかわさん
コメントありがとうございます。
あ、ホントですね。ロールオバーしてないところの挙動がおかしいです。
修正しときました。
ご指摘、感謝感謝です。
たびたび失礼いたします。
IE5、IE5.5以下ですと、うまく挙動しないんですね。
あれなくば、これなしですが・・・。
WEBでは、はじめまして。「Web標準の日々」喫煙室にて
突然声をかけさせて頂きました、新潟のつとむらです。
prototype.js無し版、素晴しいです。嬉しいです!!!
前VerのimageReplace.jsのおかげで大変助けて頂きました。
次のサイトで新Verも是非使用させて頂きたいと思います!
ちなみに、あの日は地震の影響で帰ることができませんでした。(^-^;
あの時は本当に突然ですみませんでした。
貴重なお話を聞かせて頂き、ありがとうございました!
また何かの機会がありましたら、宜しくお願いいたします。
>つとむらさん
地震でかえれなかったんですね。。。
台風に地震といろいろ大変でしたね。
新Verもまたご意見いただけたらと。
ナビゲーションのロールオーバーの仕方は悩んでます。
CSSで-9999emとか使った画像置換はあまりよくないらしく、
どうしても画像に置き換えたい時にどうしたものかと思っておりましたが、
imageReplace.jsを使うとjavascriptを有効にしていなくても関係ないんでしょうか?
どんなデメリットがあるか知りたいです。
最近はみんなどんな風に画像置換するのでしょうか?
javascriptもたくさん入れるとエラーが起こる可能性があるので、ちょっと恐々試してみます。
>umeさん
コメントありがとうございます。
個人的な意見を言いますと、画像置換に完璧な手法は存在しません。それぞれにデメリットがあり、どのデメリットを許容できるかで選択の幅が狭まってくると思います。
CSSで-9999emの手法も画像がoffでCSSがonという非常にニッチな環境で、ちゃんと情報が閲覧できません。
ここを許容できればこの手法で問題ないと思います。事実、この手法が一番よく使われています。
imageReplace.jsは様々な環境で目的の文字情報は閲覧できるよう作成されています。JavaScriptライブラリですのでJavaScriptがOFFの環境では画像置換は置き換えませんが、要素内に記述されている文字などはちゃんと閲覧できます。
また、他のライブラリとのバッティングしないように設計されているので、相性の問題でエラーが出ることはありません。
こんな感じですね。参考になればと
いろいろとありがとうございます。
imageReplace.jsをナビゲーション横並び、ヘッダーの下
横サイドバーにも縦並びで入れたところ、表示が遅くなります。
一度テキストだけが表示されてから後から画像が表示される感じです。
あまりきれいではないのですが・・・・・
一つだけにした方がいいのでしょうか?
CSSと比べてみたら、CSSの方が表示が速いです。
CSSを切っているとレイアウトも崩れますので、ONを前提に考えておりますが、
どちらにするかこのあたり悩むところです。
Q&Aの効果的な見せ方もまた教えてくださいね。
>umeさん
imageReplace.jsはすべてが読み込み終わってから表示されるので、どうしも表示が遅くなってしまいますね。
初めまして
検索してたらこのサイトに辿り着きました
この画像置換方法、素晴らしいですね!
当方、WEBデザイナーをやっておりまして
お客様のサイトにこの方法を取り入れたいのですが・・・
それって大丈夫なんでしょうか???
ちなみに、ソースの書き換え等は行いません。
そのまま使わせて頂きたいと思っております。
>masaさん
MITライセンスで配布しておりますので、
ご自由に利用していただいて大丈夫ですよ。
ソースの書き換えをしても問題ありません。
ありがとうございます
ありがたく使わせて頂きますー!
西畑さん はじめまして。
大変ありがたく使わせていただいております。
さてさて、
気になったことなのですが、
一時期 画像が 置換しないことがありまして、
画像自体のリネームをすると しばらくは置換されるようになります。
しかしまた しばらく経つと置換しなくなる、ということが
ちょくちょくありました。
(intel MAC、Safari, Firefoxにて)
キャッシュを消すと部分的に置換されるようになったりなんだりで
何とも不安定だったのですが、
ふと思い立ち ファイル名を短めにリネームしたところ、
それ以後 正しく表示されるようになりました。
元のファイル名も side-menu-base_01a.gif とか、
そのくらいの長さだったのですが、それって何か関係あるものですか?
良いJavaScriptをありがとう!
ところで、記載の通りに
Ajax
という書き方をして実装してみたんですが、なんでなのかな??、IE7だと位置がインデントされるんです。。
サイドバーにまずは実装したんですよ。そすると30~40pixelくらいかなぁ、どれも実際の位置よりも右にずれて配置されてしまうんです。
だけれども、現在地ページはaタグ無しにしてロールオーバー画像だけ表示させてますが、このほうはインデントされず正常な位置です。aタグが入ったとたんにこうなっちゃうってのは何なんでしょうか。もし何かご存じでしたらアドバイス頂けたらとってもウレしいです。
ちなみに、phpのif文で、
「本ページがこのディレクトリのページであるかどうか?」
の判定をし、
falseならばaタグRollOver型のソースを表示せよ
trueならばaタグ入れず、spanタグの非RollOver型ソースを表示せよ
というようにやってるんですが、まさかphp記述が入ったとたんにダメになるということはないと思いますし。。
これは素晴らしいアイデアですね!!
サイトにつけてみました。
ただ、画像が表示されるのが極めて遅いのでそこだけは改善しないといけません。Dreamweaverでbodyタグにpreloadが入るように何か効率的に先読みさせるなどして表示を普通のスピードにさせることができないでしょうか。
全て表示されているのにGlobalNavigationやサイドバーリンクナビゲーション、その他フッターのナビゲーションなど、画像のリンク部分だけが全て表示されない時間が相当長いので、遅延サイトだと思われてしまっていて困っています。