マウスオーバーでズームアイコンを表示する

　※　（この記事を書いたときはブログソフトがMovable Type でしたが、現在はWordpress に変更したため、デモ画面は動作しません）

前の記事で、大きな画像を表示する時、サムネイルの小さな画像をクリックすると、うにぃうにぃと拡大する方法を書きました。

でも、どれが大きな画像のあるサムネイルなのかがわかりにくいので、拡大画像のあるサムネイル表示の時、原寸サイズの写真があることをわかりやすく見せるために、画像の上にマウスをもっていった時にズームアイコンを表示するための備忘録です。

　※　実際のデモ画面は、コチラ

簡単なCSSだけで表示する方法です。

　※　参考にしたのは、コチラのサイトです。

ブログに表示させる場合は、表示させたいテンプレート（メインページ、エントリーアーカイブ、カテゴリーアーカイブ、日付アーカイブ）のそれぞれに次の部分を追加します。

<head>　と　</body>　の間に、

そして、

<body>　と　</body>　の間に、

を追加して、さらに今まで書いた記事の中の画像にも、ズームアイコンを表示させたい時は、

の間に

を追加して、

と変更します。

最終的には、次のようになります。

<html>
<head>

<style type=”text/css”>
#gallery1 { width:100%; overflow:hidden;}
#gallery1 a { position:relative; float:left; margin:5px;}
#gallery1 a span { display:none; background-image:url(“http://biketoshumi.chips.jp/wp/wpcontent/uploads/zoomicon.png”); background-repeat:no-repeat; width:44px; height:44px; position:absolute; left:10px; top:10px;}
#gallery1 a:hover span { display:block;}
#gallery1 img { border:solid 1px #999; padding:5px;}
</style>

</head>
<body>

<div id=”gallery1″>

<a href=”http://biketoshumi.chips.jp/wp/wpcontent/uploads/swiss7-04.jpg”><span></span><img alt=”朝焼けのマッターホルンとゴルナーグラート展望台” src=”http://biketoshumi.chips.jp/wp-content/uploads/swiss7-04.jpg” width=”560″ height=”374″ /></a>

</div>

</body>
</html>

結局、前の記事に書いた「画像の同一画面内での自動拡大」とこの「ズームアイコンの自動表示」を一緒に出来ればよかったのですが、やってみるとなぜか画像の横に文字が回り込んでしまい、うまく表示出来ませんでした。

それにズームアイコン表示のためには、過去の記事の画像部分に手を入れる必要があるので今回は「ズームアイコンの自動表示」の導入の方を見送る事にしました。

ということで、こういう方法もあるよというだけの備忘録になってしまいました。