画像置換という方法を知っていますか？
aタグの背景画像を設定し、フォアグラウンドのテキストを何らかの方法で表示範囲から消す事で、imgタグを使わずにグラフィカルな表現を可能にする方法のことを指します。さらに、擬似クラスで背景画像を入れ替え、あたかもボタンを押しているかのような表現をさせる事もでき、特にナビゲーション部分に使われるものです。Javascriptを使わずに画像のロールオーバーをさせる画期的なアイディアでした。
具体的には下記のように設定します。
<ul>
<li><a id="aaa" href="○○.html">ほげほげ</a></li>
<li><a id="bbb" href="××.html">ふがふが</a></li>
<li><a id="ccc" href="△△.html">もふもふ</a></li>
<ul>
ul {
list-style-type:none;
list-style-position:outside;
}
li {
width:100px;
height:30px;
text-indent:-9999px;
}
a#aaa {
display:block;
width:100px;
height:30px;
background-image:url("スタイルの場所から画像までの相対パス/001_n.gif");
background-repeat:no-repeat;
}
a#aaa:hover {
background-image:url("スタイルの場所から画像までの相対パス/001_r.gif");
}
上記の場合は、横100px、縦30pxのリスト枠の背景に画像を仕込んで、フォアグラウンドの文字をインデントで外に飛ばすという方法。注意する点は、aタグをdisplay:blockにしないと、100×30px全体がリンクボタンとして認識せず、実際あるべき文字分しかボタンとして認識しない点。リストの細かいバグなどは、YUIの説明などで少し触れたが、もう一つ触れておくと、横並び一列ナビゲーションを実現させる場合、liタグ、aタグ双方にfloat:leftを設定しないと、WinIEでは階段状に崩れてしまいます。
ちなみに、文字をそのまま生かして、バックグラウンドを切り替える場合は、「display:block」を指定しているため、MacIEではaタグでセンタリングがききません。aタグのさらに子要素としてspanなどを配置して、もう一度インライン要素に戻し、それをセンタリングするなどの必要があります。
「テキストを見えないようにする」方法は様々です。上記のようにインデントで表示範囲外に飛ばす方法や、パディングで下方向に下げて、オーバーフロー設定でスクロールさせないなど、様々な方法があります。
さて、ここからはちょっと嫌なお話。
実はこの方法について、2006年11月頃にGoogleの中の人が検索ガイドラインについての会議で「これはスパムじゃねーの？」的取り上げをした事で、業界が震撼しました。以前、学生が「スパムだから・・・」とかブツブツ言ってたって話をしたと思いますが、アレはこの件です。
何で、この方法がスパムなのか？それは、過度のSEO対策で、画像とは関係ないテキストを入れまくって、検索エンジンに引っかかりやすくしようとした連中が大勢いたからでしょう。テキストはどのみち範囲外に飛ばされるので、ぶっちゃけ内容は何だっていいという事なのでしょう。
この反響は予想以上に大きく、ブログの普及に伴って様々なサイトで、まだ決定していないにも関わらず「やってはいけない」的な取り上げ方をされました。業界の気持ち悪い部分を浮き彫りにした事件だと思います。
結局、2007年6月頃に更新されたGoogleのガイドラインには、「隠しテキスト、隠しリンクを使用しない」という項目が入っていますが、画像置換については「サイトの内容や情報と全く違うモノを入れ込んだ場合はダメだけど、正しくやってるなら問題ないよ」という感じで、後はGoogle側の裁量任せ状態です。まぁ、これを片っ端から排斥したらとんでもない事になるでしょうし、グーグル先生の事だから、何かやってくれると思っています。
しかし、負の遺産として、「画像置換」で検索すると、あたかも否定的な書き出して玉虫色な内容に終結する読み物が大量に残ってしまいました。多分、これから皆さんがHTMLで仕事をする時、この件で一度ぐらいは衝突があるかもしれません。
このまま終わってしまっては、他の読み物と同じになってしまいますので、この代替方法(ロールオーバーの代替方法)を紹介しておきます。昔からあるJavascriptを使ったロールオーバーですが、ソースの記述が非常に簡単な方法です。
function imageRollover() {
if (!document.getElementById) return
var img = document.getElementsByTagName("img");
for(i=0;i<img.length;i++){
var src = img[i].getAttribute("src");
var ftype = src.substring(src.lastIndexOf("."), src.length);
if(new RegExp("_n"+ ftype + "\\b").exec(src
)) {
img[i].onmouseover = function() {
var curSrc = this.getAttribute("src");
var curFtype = curSrc.substring(curSrc.lastIndexOf("."), curSrc.length);
this.setAttribute("src", curSrc.slice(0, -1*(curFtype.length + 2)) + "_r" + curFtype);
}
img[i].onmouseout = function() {
var curSrc = this.getAttribute("src");
var curFtype = curSrc.substring(curSrc.lastIndexOf("."), curSrc.length);
this.setAttribute("src", curSrc.slice(0, -1*(curFtype.length + 2)) + "_n" + curFtype);
}
}
}
}
addEvent(window, "load", imageRollover);
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, false);
return true;
}
else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
}else{
obj["on"+evType] = fn;
}
}
上記スクリプトを「○○.js」と適当な名前で保存し、HTML側で次のような一文をヘッダに挿入します。
<script type="text/javascript" src="jsまでのパス/○○.js"></script>
Javascriptについての話はまた機会があった時にという事で、今回は説明を割愛しますが、これはネット上で公開されていたスクリプトを利用しています。javascript関連の書籍や説明サイトを見れば、同等のスクリプトは多数見つかると思います。ちなみに、このスクリプトは「MacIE」でも動作するようにしてあります。
使い方は至って簡単。
<img src="○○_n.jpg" alt="ほげ" width="100" height="30" />
「○○_n.jpg」という、通常時の画像を用意し、同じ階層に「○○_r.jpg」というロールオーバー用画像を入れておきます。通常時画像をimgタグで呼び出します。後はjsが勝手に「_n」と「_r」の画像を入れ替えてくれます。