カウンター
  • 1373今日の閲覧数:
  • 1345昨日の閲覧数:
アーカイブ
カテゴリー

 
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>

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

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

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


ブログランキングに参加中です
気に入ったらポチお願いします

にほんブログ村 バイクブログ ハーレーダビッドソンへ
にほんブログ村


バイクランキング


ツイッター、やってます!
twitterlogo


 
 

スポンサードリンク


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

コメントをどうぞ。

プロフィール


プロフィール写真
メカ好きおじさん

・44年前に原付、中型二輪取得
・CB50で東北一周ソロで野宿旅
・250ccで四国・九州3週間5万円の野宿旅
・38都道府県制覇
・XL250オフ後、再度オンロードに戻る
・KAWASKI2ストを最後にバイクを降りる
・16年のブランク後リターン
・50歳で大型二輪免許取得
・ハーレーFLSTCに奥さんとタンデム中
・2012年から北海道タンデムツーリング6回


ブログランキングに参加中です
気に入ったらポチお願いします

にほんブログ村 バイクブログ ハーレーダビッドソンへ
にほんブログ村


バイクランキング

PVアクセスランキング にほんブログ村


ツイッター、やってます!
twitterlogo