ロールオーバー画像切替え

ページを作成する際に使用するロールオーバー処理。必須というくらいに使用するので覚書にロールオーバーは昔から使う処理ですが、いくつかの実装方法があります。僕がよく使う方法を記載しております。

ロールオーバー効果とは、Webページの表現方法の1つである。ロールオーバー効果を設定した画像にポインターを合わせる事で、自動的に別の画像が表示される。ポインターを他の位置にずらすと、本来表示されていた画像が再度表示される。これが、ロールオーバー効果である。JavaScript等で定義可能で、Webページの表現方法の1つで利用されている。ロールオーバー効果を設定する場合は、1ヶ所の表示位置に2種類の画像を準備する必要がある。使用方法は、ハイパーリンクが設定されたボタンや、意図的に画像を変化させたい場合に用いられる。

CSSのみ（background-imageの切替え）

cssのbackgroundプロパティを使用して、:hover疑似クラスでロールオーバー後の背景を入れ替える方法です。僕はこの方法をよく用いてましたがプリントなどの関係で今はあまり使用していません。

HTML表記

<div class="sample01">
	<a href="#">サンプル</a>
</div>

CSS表記

.sample01 {
    background: url("/img/sample-01.png") no-repeat;
}

.sample a {
    width: 200px;
    height: 60px;
    background: url("/images/sample-01.png") no-repeat;
    display: block;
    text-indent: -9999px;
}

.sample a:hover {
    background-image: url("/images/sample-02.png");
}

+CSS（マウスオーバーでimg非表示）

プリントなどの関係を考慮して最近は下記の方法を使用してきました。
ただまあcssをいじらなければいけないなどのメンテナンスの事も面倒になってきたので最近は
３番目の処理を使用しています。

HTML表記

<div class="sample02">
	<a href="#">
		<img src="img/btn_sample_out.png" width="200" height="60" alt="サンプル">
	</a>
</div>

CSS表記

.sample02 {
    background: url("/images/sample-02.png") no-repeat;
}

.sample02 a {
    display: inline-block;
}

.sample02 a:hover {
	background-color: transparent; 
}

.sample02 a:hover img {
    visibility: hidden;
}

onmouseout属性,onmouseover属性（JavaScript）

ただこちらの場合はjavascriptをOFFにされると動作はしませんが汎用性が高いのとボタン画像を書き換えてやれば
そのまま使えるので最近はこの手法を使用しています。

HTML表記

<div class="sample03">
	<a href="#">
		<img src="images/sample-01.png" width="200" height="60" alt="サンプル" onmouseover="this.src='images/sample-02.png'" onmouseout="this.src='images/sample-01.png'">
	</a>
</div>

どの手法を使うかはそれぞれのやり方になるとは思うのですが、個人的には三番目の手法を使用する方がいいような気がしています。
３番目はそれこそ昔から使われていた手法ですが、コードも短くなったもんだと感心しております。

Originally posted 2016-11-18 21:43:15.