アンチテキスト飛ばしのための、マウスイベントボタン実装Tipsです。
これでわざわざCSSにa:overなど書かなくて済みます。ボタン画像の制作も楽々！

前回の記事にも書きましたが、「テキスト飛ばし」や「画像置換」がNGとなりつつあり、ナビゲーションメニューのマウスオーバーイベントをCSSで実装しづらくなりました。

まず下記のソースをご覧ください。

<ul id="nav">
     <li class="nav01"><a href="hoge.html" title="hogeへのリンク">hoge</a></li>
</ul>

たとえば、上記のようなHTML構造のナビゲーションを、ボタン画像にしたい場合に大抵の場合、通常時画像とオーバー時画像をマージした１枚画像を用意し、下記のようなCSSでテキストを飛ばして、ボタン画像を背景として配置しますよね。

ul#nav li.nav01 a {
     display:block;
     text-indent:-9999px;
}

ul#nav li.nav01 a {
     width:100px;
     height:50px;
     background:transparent url(/images/nav01.gif) 0 0 no-repeat;
}

ul#nav li.nav01 a:hover {
     background-position:0 -50px;
}

しかし、このようにテキスト飛ばしを使ってしまうと、SEO的にあまりよくありません。
ましてや、画像の読込みに失敗した場合などは、何も表示されなくなってしまいます。

そこで今回は、テキスト飛ばしを使わずに、<img>にクラス名をつけるだけで、マウスオーバーボタンを実装するTipsを紹介します。

• jquery.js
• 通常時のボタン画像
• オーバー時のボタン画像(ファイル名に”_over”)を付与したもの
• カレント状態のボタン画像(ファイル名に”_current”)を付与したもの
• 今回実装するbtn.js

※ボタン画像のファイル名は、先頭を全て同一としてください。

例> 通常時の画像：nav001.gif
オーバー時の画像：nav001_over.gif
カレント時の画像：nav001_current.gif

次に、btn.jsを用意します

$j = jQuery.noConflict();

SITE = {
	basepath : '/',
	preloader : {
		loadedImages: [],
		load: function (url){
			var img = this.loadedImages;
			var l = img.length;
			img[l] = new Image();
			img[l].src = url;
		}
	}
};

$j(function(){
	$j('img.roll').each(function(){
		this.originalSrc = $j(this).attr('src');
		this.rolloverSrc = this.originalSrc.replace(/(\.gif|\.jpg|\.png)/, "_over$1");
		SITE.preloader.load(this.rolloverSrc);
	});
	$j('img.roll').not($j('.rollgroup .roll, .current .roll')).hover(function(){
		$j(this).attr('src',this.rolloverSrc);
	},function(){
		$j(this).attr('src',this.originalSrc);
	});
});

そしてHTMLを下記のようにすると、簡単に実装できてしまいます。

<ul id="nav">
     <li><a class="roll" href="hoge.html" title="hogeへのリンク"><img src="/images/nav01.gif" alt="hoge" /></a></li>
</ul>

<img>に”roll”というクラスを付与すると、マウスオーバーで”_over”が付いた、同一ファイル名の画像に差し代わるといった仕組みです。
こうすれば、もし画像が読み込めなかった場合は、代替えテキストが表示されますし、SEO的にも「テキスト飛ばし」よりも、よっぽどマシになります。

ただし、この方法の場合ですとJavascriptが使えない環境下で、画像が差し代わらなくなってしまうというリスクもあります。

ですが、Javascriptが使えない環境というのも、最近では少なくなってきましたし、仮にスクリプトが実行されなくても、ボタン画像もしくは代替えテキストが表示されるので、実装する価値はあるかなーと思います。

わざわざ、各イベント画像をマージさせて、SEOやユーザビリティを殺した方法を使うか。
それともJavascript非対応環境へのエクスペリエンスを無くすか。