- 更新日
- 2008年11月24日
- 公開日
- 2008年07月09日
ロールオーバー時の画像置換手法はいくつ知っていますか？
たとえばhtmlでは画像の替わりに「テキスト」でマークアップし、CSSでテキストを「text-indent:-9999px;」して画面から擬似的に消し、画像はCSSの通常とロールオーバー用の画像をつなげた一枚の背景画像を使用し、表示位置を通常とロールオーバー時を切り替えることで実現できます。
それってアクセシビリティ的にどおなの？
個人的に「テキストをtext-indent-9999px;」は好きではありません。仮に画面サイズが9999px以上であれば、そのテキストは表示されるわけで。さらに背景画像を非表示にしていたら画面に情報は何も表示されません。それってつまり、アクセシビリティ的観点ではよろしくありません。CSSを切った場合にテキストのみになって美しい！？それって完全に作り手のエゴだと思ってます。情報として見せたい画像であれば、それは画像でマークアップすべきだと考えます。
別の方法として、htmlで「画像」をマークアップし、ロールオーバー時にCSSで画像を非表示にし、その親要素の背景画像にロールオーバー用の画像を指定することで実現できます。
それってメンテはしやすいの？
ただ、画像を修正し、ファイル名が変更された場合、ロールオーバー用の画像は背景画像に設置するため、imgタグ要素とその画像を括るaタグ要素の背景画像を指定する必要があり、作業にちょっと手間がかかって面倒です。
あらためて考えたいのは、ロールオーバーに画像を置換するのはユーザビリティを向上するためです。仮にロールオーバーで画像が置換されなかったとしても情報が伝わらなくなるわけではありません。つまりJavascriptを使用して画像置換を行った場合、Javascriptが使えない環境において致命的な状況が起こるわけではありません。そのことを踏まえて、画像置換にJavascript+CSSを用いたDOM Scriptingを使用することを選択します。
DOM Scriptingを使用することで、画像にclass属性を記述するだけでロールオーバー時に画像が切り変わるようになるため、メンテナンス性は抜群です。
サンプル
Javascriptが有効であれば、画像をマウスオーバーすると画像が置き換わるのをご確認いただけるかと思います。
使い方
- 画像（ファイル名ルールとファイルの設置場所）
-
/img/btn/sample.gif （通常用）
/img/btn/download_over.gif （ロールオーバー用）通常とロールオーバー用の画像を同じ階層に用意し、ロールオーバー用のファイル名を「通常＋ロールオーバー用の共通ルール（デフォルトは「_over」）.拡張子」とします。
- サンプルの(x)html
-
<img src="/img/btn/sample.gif" alt="" class="imgChange" />
ロールオーバー時に画像置換させたいimgタグ要素のすべてに、共通のclass名を記入します（デフォルトは「imgChange」）。
- Javascript（tk1975_config.js への記述例）
-
function imgChange_config(){
var class_name = "imgChange"
var overImgNameRule = "_over";
tk1975_imgChange(class_name,overImgNameRule);
}
prepareOnloadFunction(imgChange_config);- ※ロールオーバー時に画像置換させたいimgタグ要素に共通のclass名を変数「class_name」の値として設定（デフォルトは「imgChange」）
- ※通常とロールオーバー時の画像ファイル名の違いを変数「overImgNameRule」の値として設定（デフォルトは「_over」）
ロールオーバー用の画像ファイル名は「通常」＋「overImgNameRule」＋「.拡張子」とします。 - ※関数「prepareOnloadFunction」に関しては、「DOM Scriptingを利用する上で知っておくべきこと」を参照してください。
思考回路 〜 tk1975_imgChange(class_name,overImgNameRule); の流れ〜
- ドキュメント内のimgタグ要素のclass属性に「class_name（デフォルト「imgChange」）」が含まれるものを抽出
- ロールオーバー用の画像を事前読み込みする
- ロールオーバー時とロールアウト時に画像置換する
解説 〜 tk1975_imgChange(class_name,overImgNameRule); の詳細〜
- Javascript（tk1975.js）
-
- function tk1975_imgChange(class_name,overImgNameRule){
- if(!document.getElementsByTagName("img")) return false;ドキュメント内にimgタグがなければ処理を終了
- var imgChange = document.getElementsByTagName("img");ドキュメント内のimgタグ要素を抽出
- for(var i=0; i<imgChange.length; i++){
- if(imgChange[i].className.indexOf(class_name) == -1) continue;imgタグ要素のclass属性に「class_name（デフォルトは「imgChange」）」がなければ次のimgタグ要素を調査
- if(imgChange[i].className.indexOf(class_name) != -1){imgタグ要素のclass属性に「class_name（デフォルトは「imgChange」）」がある場合
- var preImgSrc = imgChange[i].getAttribute("src");
- var preImgOverFile = preImgSrc.split("/").reverse()[0];
- var preImgOverFileSplit = preImgOverFile.split(".");
- var preImgPath = preImgSrc.split(preImgOverFile)[0];
- var preImgOverSrc = preImgPath + preImgOverFileSplit[0] + overImgNameRule + "." + preImgOverFileSplit[1];【8-11】画像ファイル名を拡張子で分割し、間に「overImgNameRule（デフォルトは「_over」）」を挿入して、ロールオーバー時のファイル名を生成
- var preloadImg = new Image();
- preloadImg.src = preImgOverSrc;【12,13】ロールオーバー時の画像を予め読み込む
- imgChange[i].onmouseover = function(){【15-20】画像をロールオーバーしたときの処理
- var imgSrc = this.getAttribute("src");
- var imgOverFile = imgSrc.split("/").reverse()[0];
- var imgOverFileSplit = imgOverFile.split(".");
- var imgPath = imgSrc.split(imgOverFile)[0];
- var imgOverSrc = imgPath + imgOverFileSplit[0] + overImgNameRule + "." + imgOverFileSplit[1];
- this.setAttribute("src",imgOverSrc);画像置換
- }
- imgChange[i].onmouseout = function(){【23-28】画像をロールアウトしたときの処理
- var imgSrc = this.getAttribute("src");
- var imgOverFile = imgSrc.split("/").reverse()[0];
- var imgOverFileSplit = imgOverFile.split(overImgNameRule);
- var imgPath = imgSrc.split(imgOverFile)[0];
- var imgOverSrc = imgPath + imgOverFileSplit[0] + imgOverFileSplit[1];
- this.setAttribute("src",imgOverSrc);画像置換
- }
- }
- }
- }
-
ポイントは、src属性値を「/」で分割し、並び順を逆にする点。getAttribute("src")で取得する値は、src属性値を相対パスで記述した場合、返ってくる値がブラウザによって異なることに配慮しています。
コメント＆トラックバック
この記事に関するご意見・ご感想をお聞かせください
この記事へのトラックバック
http://search-result.org/mt-tb.cgi/1
