【SEO初心者のEvoブログ】

画像のロールオーバー

ロールオーバーとはページ中のボタン画像などにマウスカーソルが移動すると、その部分のイメージが違う画像に変わるようにする手法のことです。

マウスが載った途端にイメージ画像が変化することによってユーザのクリックを誘導します。リンクにはなっていない場合もありますが、これは多分に自己満足でしょう。

ロールオーバーはめんどくさいし重くなる

ロールオーバーを行うには、代替の画像を作成しJavaやCSSで設定する必要があり、一枚一枚代替画像を作るのは結構めんどくさい作業です。

明らかにボタンと分かる画像に、ロールオーバーを指定する必要があるかどうかは意見の分かれる所ですが、サイトは極力軽い方が良いと思うので、使いすぎにも注意が必要です。

簡易ロールオーバーもどき

そこで、代替画像を作る必要が無くロールオーバーしているように見せるためのCSSをご紹介いたします。

リンク付きのイメージに対し、透明度を変化させることによって、ロールオーバーしているようにみせる手法です。IEはopacityプロパティに対応していない為、filterを使います。

【CSSソース】
a:hover img {
-moz-opacity:0.5;
opacity:0.5;
filter: alpha(opacity=50);
}

0.5や50の数値を変えることにより透明度が変化します。

簡単かつ全ての画像をロールオーバーした時よりも軽く、全てのリンクイメージに一発で対応できるので、結構使ったりします。

※このCSSはCSS Validatorではエラーとなります。

背景画像上にボタン画像を設置し、先ほどとは逆に元のイメージの透明度を下げ、a:hoverで透明度を上げることによりよりこんな感じにもなります

タグ：Webテクニック