カウンター
  • 1129今日の閲覧数:
  • 1211昨日の閲覧数:
  • 847今日の訪問者数:
  • 884昨日の訪問者数:
アーカイブ
カテゴリー

 
2011年6月8日 水曜日

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


 

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

 

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

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

mouseover.jpg

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

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

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

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

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

<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://greenleaf.ddo.jp/wp/wp-content/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>

そして、

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

<div id=”gallery1″>

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

<a href=”●●.jpg”><img ●●.jpg” /></a>

の間に

<span></span>

を追加して、

<a href=”●●.jpg”><span></span><img ●●.jpg” /></a>

と変更します。

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

<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://greenleaf.ddo.jp/wp/wp-content/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://greenleaf.ddo.jp/wp/wp-content/uploads/swiss7-04.jpg”><span></span><img alt=”朝焼けのマッターホルンとゴルナーグラート展望台” src=”http://greenleaf.ddo.jp/wp/wp-content/uploads/swiss7-04-thumb.jpg” width=”560″ height=”374″ /></a>

</div>

</body>
</html>

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

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

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


ブログランキングに参加中です
気に入ったらポチお願いします
にほんブログ村 バイクブログ ハーレーダビッドソンへ
にほんブログ村


 
 

スポンサードリンク


  この投稿へのコメントは RSS 2.0 フィードで購読することができます。 コメントを残すか、ご自分のサイトからトラックバックすることができます。

コメントをどうぞ。
 質問には出来るだけお答えするようにしていますが、
 内容によりお答えしかねる場合があります。
 また、回答させていただいた際には、その結果をお知らせください。

プロフィール


メカ好きおじさん写真
メカ好きおじさん

・41年前原付、中型二輪取得
・CB50で東北野宿一周
・250cc四国・九州3週間5万円野宿
・38都道府県制覇
・XL250オフ後、再度オンロード
・KAWASKI2スト最後に降りる
・16年ブランク後リターン
・50歳で大型二輪免許取得
・ハーレーFLSTCにペアライド中


ブログランキングに参加中です
気に入ったらポチお願いします。
にほんブログ村 バイクブログ ハーレーダビッドソンへ
にほんブログ村

twitterlogoツイッター、やってます!
twitterlogoインスタグラム、やってます!