JavaScript-enhanced image replacementを試してみた

May 24, 2005

JavaScript-enhanced image replacementを試してみた

clagnutで公開されているJavaScript-enhanced image replacement。

従来のImage Replacementの問題点は、CSSでテキストを画面外へ隠し背景画像に置き換えるという手法ゆえ、CSSが有効で画像が無効な環境下では代替テキストが表示されないため、それはアクセシビリティ的にどうか、という話もありました。（mezzoblueのRevised Image Replacementという記事は、この類におけるさまざまな手法を比較検討しているようです）

CSSが有効で画像が無効な環境のユーザーというのが現在どれほどの規模いるものかはわかりません。ただ僕もつい1年と半年ほど前までは、自宅ではバリバリの（?!）ダイヤルアッパーだったわけで、その頃は画像をオフにしてブラウズしていることも多々ありました。

普通にIMG要素を置けばこういった問題も発生しないので、それでいいじゃないかという気がします。しかし同時に、例えばmedia="handheld"として携帯端末用のCSSも用意し、同じHTMLでそのまま２次利用(?)しようなどと企んだサイトであれば、img要素は多用しないほうが良い場合もあるとも思えるのです。

JavaScript-enhanced image replacementにおける「JSで画像が読み込まれているか判定し、読み込まれていない場合、テキストを表示させる」という手法はそのあたりにひとつ妥協点を落としてくれそうな気がします。

僕は正直JSとか毎回用意するのは手間に思うし、携帯電話などに同じHTMLを読み込ませるのは、今のところもういいやっていう感もあるので、今後本気で導入するかどうかは怪しいですが、例によって一度くらい試してみたくなったのでサンプルをひとつ作ってみました。

下の画像はCSSの背景で設定しテキストは隠していますが、画像をオフにすると、今度はテキストが表示されるはずです。※WinIEの場合怪しい

茶坊主日誌カラクリエイト

これを実践するにあたってですが、僕はIDなどを公開されているスクリプトのものと合わせて、スクリプト自体はほとんど変更せずそのまま使用しました。（まぁ変えたしても数箇所ですが）

function checkImages() {
if (document.getElementById) {
var x = document.getElementById('logoimg').offsetWidth;
if (x != '167') {
document.getElementById('heading').style.textIndent = "0";
}
}
}

window.onload = checkImages;

JSと英語が良くわかってないのでやや不安な解釈ですが、動作としてはlogoimgというIDをもった要素の幅を見に行き、返ってきた値が一致しない場合（つまり画像が読み込まれていないと判断される場合）、text-indentの値を0とし、あらかじめtext-Indent: -1000px;などとして画面外に追い出しておいたテキストの開始位置を元に戻してやる感じでしょうか。

画像表示がオンかオフかの判定に使われるlogoimgというIDを持ったimg要素はサイト全体で使用しているものが望ましげですので、ここではページ左に配置してあるイラストにその役目を担わせています。

<img src="http://www.extype.com/karakuri/images/logo.gif" alt="カラクリエイト" id="logoimg" />

上のJSにある167という数字はこのイラスト（GIF画像）自体のwidthと同じにしておく必要があります。

実際に画像を表示させる部分のHTMLとそのスタイルは次のようになります。

<div id="heading">カラクリエイト</div>

#heading {
width: 200px;
height: 109px;
background: #fefefe url(/karakuri/images/enh_rep.gif) no-repeat;
text-indent: -1000px;
font: bold 100%/1 "\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF";
}

当然ながらJSが無効の環境ではテキストを元に戻す動作も発動しないので、従来のImage Replacementと同じ問題点が付きまとってしまうわけですが。

まぁ結局は何を優先させるかということに落ち着く話だとは思いますが、ひとつこういう手法もあるのかという勉強にはなりました。

追記：WinIEの場合一度キャッシュされると、その後画像をオフにしてもそのwidthとheightは保有したままになるとかで、その場合正しい判定が行えず、画像をオフにしてもテキストが表示がされなくなってしまいます。これはclagnut/sandboxのサンプルにあるKnown issuesでも記されている既知の問題のようです。

06:43 PM｜(X)HTML+CSS｜3コメント｜0トラックバック

このエントリーのトラックバックURL
http://www.extype.com/mt/mt-tb.cgi/17

ども～。とりあえず到着報告。

実はこれを使わずにCSSだけで同じことできないかと本日試行錯誤してました。（その過程でメッセージで質問した例のページをまとめてたり）

投稿者 Kyosuke : May 27, 2005 01:50 AM

＞CSSだけで同じことできないか

余分なspanを使えばできないこともないとか。

＜div id="hoge"＞＜span＞＜/span＞テキスト＜/div＞

div#hoge { position: relative; width: 100px; height 20px; overflow: hidden; }
div#hoge span { position: absolute; left: 0; top 0; width: 100px; height: 20px; display: block; }

みたいな感じかと思うのですが、なんかちょっと気持ち悪いような気もしますね。

ところで、「どーですか？[謎]」の意味するところがいまさっきわかったり。答えは「そろそろダメポ」です。というか深読みしすぎてる？？

投稿者 kawachi : May 27, 2005 02:11 AM

上の例は「CSSだけで」というところからは微妙に外れている気がするのが気持ち悪さの原因かとも思いました。うん。

投稿者 kawachi : May 27, 2005 02:17 AM