一番簡単な画像置換の方法-imageReplace.js-
【PR】初心者でも安心なレンタルサーバー。２６３円から使えます。
【PR】HP登録でSEO対策！アクセスアップにコチラ！
画像置換は設置がややこしく。
デメリット・メリットの切り分けが困難です。
そんなわけで一番簡単な画像置換の方法として、画像置換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
- http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/247
- トラックバック内容
-
» 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はすべてが読み込み終わってから表示されるので、どうしも表示が遅くなってしまいますね。