CSS【hover】で画像を変える

Pocket

CSSの「hover」を使って画像を入れ替える際の方法ですが、使いやすいのはどんな方法でしょう?

僕がいつも使っているのは、1枚画像を縦にずらして表示する方法です。幅100pxの縦50pxがブラウザ上でのデフォルトの表示だとしたら、元の画像は幅100pxの縦100px、といった感じです。

最近は減ってきていますが、今回2枚画像をhoverで入れ替えているサイトを発見したので、以前自分もやっていた事を思い出しながら、メモ代わりに綴ってみます。

表示の問題

1枚画像で表示させる事のメリットは、ページを初めて開いた際に画像上にマウスを持って行ってもスムーズに表示できる点が一つあります。

2枚の画像を使って入れ替えると、マウスを持って行った時に一瞬画像が消えたりしますよね?

そういった点が表示の問題として解決できるのと、imageフォルダ内に画像がたくさんにならないという事もありますねw

HTML上の問題

グローバルナヴィゲーションなどで、2枚画像をhover入れ替えさせているサイトは、大体代替えテキストの部分もまたは、空白となっている状態が多いですよね。リンクをしっかりと構築させるには、代替えテキストは当然あったほうが有利になります。

SEOでの問題

SEO的な部分から見ても、あまりよろしく無い構造だと思います。

なぜかと言うと、2枚の画像を入れ替えるという事はページを読み込んだ時には存在しない画像が、マウスを載せたときに現れるのですから、内部施策では良いとは言えないでしょうね。

text-indent:-9999px;と似たような効果もあるのかもしれません。これでスパム扱いされたらせっかく考えて作ったページも台無しですね。

ソース記述例

一枚画像で表示する場合のCSS&HTMLをメモ!

↓HTMLソース↓

<div id="gl_nv">
   <ul id="global_nav">
	<li><a class="top" href="hoge.html">トップページ</a></li>
	<li><a class="sub1" href="hoge1.html">サブページ1</a></li>
	<li><a class="sub2" href="hoge2.html">サブページ2</a></li>
	<li><a class="sub3" href="hoge3.html">サブページ3</a></li>
   </ul>
</div>

↓CSSソース↓

#global_nav ul {
	float:left;
	width: 600px;
	height: 50px;
	list-style: none;
}
#global_nav li {
	float:left;
	width: 150px;
	height: 50px;
	overflow: hidden;
}
#global_nav li a.top {
	display: block;
	width: 150px;
	height: 50px;
	padding-top: 50px;
	background: url(../img/nav/top.gif) 0 50px repeat;
}
#global_nav li a.sub1 {
	display: block;
	width: 150px;
	height: 50px;
	padding-top: 50px;
	background: url(../img/nav/sub1.gif) 0 50px repeat;
}
#global_nav li a.sub2 {
	display: block;
	width: 150px;
	height: 50px;
	padding-top: 50px;
	background: url(../img/nav/sub2.gif) 0 50px repeat;
}
#global_nav li a.sub3 {
	display: block;
	width: 150px;
	height: 50px;
	padding-top: 50px;
	background: url(../img/nav/sub3.gif) 0 50px repeat;
}
#global_nav li a:hover {
	background-position: 0 0;
}

今回使っている画像は、幅150pxの縦100pxで、ヘッダー下の横型グローバルナヴィゲーションと仮定します。

background imgを使う場合は、display:block;を使います。

padding-top:50px;でデフォルトをずらしていますが、これは41行目からのhoverでずらしても同じです。

アルファ(alpha)-透明度

CSS記述がめんどくさい方、イメージリンクに変化を付けたい場合はalpha(アルファ)を使うと楽チンです。

↓HTMLソース↓

<div id="left_nv">
   <ul id="lf_nv">
	<li><a href="hoge.html"><img src="./img/top.gif" class="alp" alt="トップページ" /></li>
   </ul>
</div>

↓CSSソース↓

a img.alp {
     filter: Alpha(opacity=100);
     opacity:1.0;
}
a:hover img.alp {
     filter: Alpha(opacity=70);
     opacity:0.8;
}

opacity値で透かしを調整できます。これで0の状態にすると背景を見せる事もできますね。

Pocket

Comments