オンマウスで画像に枠線をつけてみよう

ネットショップ作成時、商品が沢山あるページがあると思います。

沢山ある商品画像の中から、マウスを載せた画像を注目してもらうために画像の枠に色のついた線を出したら、お客様も一目でどの商品画像をクリックしようとしてるかわかりますね。

今回は、商品画像にカーソルをあわせると、色のついた枠線をつける方法です。

オンマウスで出てくる枠線のサンプル

もしもドロップシッピングで人気の商品「やさしいジョイントマット」の画像でサンプルを作ってみました。

試しに以下の画像にマウスを載せてみてください。

商品画像にカーソルをあわせると、赤い枠線がでできましたね。

これは、CSS（スタイルシート）で実装しています。

では、早速、実装してみましょう。

オンマウスで画像に枠線を付ける方法

まずは、枠線を付けたい画像を以下のようにソースで囲います。

画像が1枚の場合

<div class="waku">
<a href="移動先のURL"><img src="画像のURL"></a>
</div>

テーブルに並べてある画像を丸ごと枠線を付ける場合

<div class="waku">
<table>
<tr>
<td><a href="移動先のURL"><img src="画像のURL"></a></td>
<td><a href="移動先のURL"><img src="画像のURL"></a></td>
</tr>
<tr>
<td><a href="移動先のURL"><img src="画像のURL"></a></td>
<td><a href="移動先のURL"><img src="画像のURL"></a></td>
</tr>
</table>
</div>

CSS（スタイルシート）に追加記述しよう

続いて、画像に枠線を付けたいCSS（スタイルシート）を開き、以下を追加記述します。

/* 画像枠赤 */
.waku a img {border:2px solid white}
.waku a:hover img {border:2px solid #ff0000}

【サンプル】