スワップイメージの方法

Posted: 2009.7.24

スワップイメージとは画像にマウスを当てると、画像が切り替わる良く見かけるあれです。

スワップイメージ

やり方としてはCSS(スタイルシート)を使ったやり方と、Javascript(ジャバスクリプト)を使ったやり方とあります。
下記のサンプルをそのままコピーして試せます。

■スワップイメージ Javascript

<img src="http://www.and-nbsp.com/WP/images/bn03.png" alt="スワップイメージ" onmouseover="this.src='http://www.and-nbsp.com/WP/images/bn03h.png'" onmouseout="this.src='http://www.and-nbsp.com/WP/images/bn03.png'" />

普通のimgタグに
<img src="http://www.and-nbsp.com/WP/images/bn03.png" alt="スワップイメージ" onmouseover="this.src='http://www.and-nbsp.com/WP/images/bn03h.png'" />

マウスオーバーしたときの画像
onmouseover="this.src='http://www.and-nbsp.com/WP/images/bn03h.png'"

マウスアウトしたときの画像
onmouseout="this.src='http://www.and-nbsp.com/WP/images/bn03.png'"
を足すだけです。

■スワップイメージ CSS
<style>
.swap{
background:url(http://www.and-nbsp.com/WP/images/bn03.png) no-repeat;
width:230px;
height:231px;
text-indent:-9999px;
display:block;
}
.swap a{
background:url(http://www.and-nbsp.com/WP/images/bn03.png)  no-repeat;
width:230px;
height:231px;
text-indexnt:-9999px;
display:block;
overflow:hidden
}
.swap a:hover{
background:url(http://www.and-nbsp.com/WP/images/bn03h.png) no-repeat;
}
</style>

<div class="swap"><a href="http://www.and-nbsp.com/standard-plan.html">スタンダードプラン</a></div>


ポイントとしてはtext-indexnt:-9999px、display:blockとwidthとheightを忘れずに書くことです。
.swap aのほうに「overflow:hidden」とありますが、これによりFirefoxでクリックしたときに横に長くリンクの点線が出るのを防ぎます。


両方とも見た目的には同じですが、CSSの場合リンクのテキストにキーワードを挿入できるのでSEO的に良いかもしれません。


代表ブログ MovableTypeカスタマイズ ECCUBEカスタマイズ ホームページ制作の下請け
WordPressカスタマイズ