SEOにも強いマウスオーバーでボタン画像切り替えのまとめ

ホームページをつくる上で欠かせないボタンやバナー。

ただの画像をおくだけでもいいのですが、今回はそんな当たり前のように使用するボタンを実装する様々なやり方をご紹介いたします。

 

まずは基本！マウスオーバーで画像切り替え

ボタンにマウスを乗せると画像を切り替える方法です。

CSSスプライト

もっともメジャーなやり方は、リンクをblock化し背景に画像を設定。

:hover擬似クラスで背景画像を移動してあげることでマウスオーバーアクションを作ります。

画像

HTML

<a href=”#” class=”btn”></a>

CSS

.btn{
    width:111px;
    height:40px;
    display:block;
    background:url(画像のパス) left top no-repeat;
}
.btn:hover{
    background-position:right top;
}

サンプル

 

最もメジャーなやり方にもかかわらずこの方法は<a> タグ内にテキストが入っていない為、SEOには弱い作りになります。

（1px*1pxの透過GIFを入れるやり方もありますが、あまり好ましくないような気がします。）

 

Javascriptでマウスオーバーアクション

次はJavascriptで実装するやり方です。

今回はjQuery.rollover.jsを使用いたします。

上記リンクよりJSファイルをダウンロードしてロールオーバーさせたい画像に「.img_on」クラスを追加するだけです。

マウスが乗ると「画像ファイル名_on.jpg」のように「_on」がついた画像に切り替わります。

コチラの利点は

・CSSの記述をしなくていい

・画像の準備が容易(2枚用意するだけ)

・リンクに合った画像を配置できるので、SEO的にもCSSスプライトよりもいい

といったことが思いつきます。

 

ただ欲を言えば、「HTML上のリンクはテキストにしたい！」

そこで今回ご紹介するやり方はtext-indentを使用したやり方です。

 

text-indentのSEOにも強いマウスオーバーボタン

基本的にはCSSスプライトを使用しますが、HTML上のリンクにテキストを配置できる追加機能といったところでしょうか・・・

↓CSSスプライトのCSSに下記を追加