マウスオーバーで拡大

2005年09月19日

前まで

1週間ほど前から、トップの右下には、日記に乗せた画像を表示するようにしていたのですが、この度、マウスオーバーで画像を拡大表示するようになりました。

単に、マウスを当てると表示サイズが大きくなるだけです。別に、他の画像が表示されているわけでは無いです。

これから　マウスオーバー

Firefox でも動きますが、使用感は Internet Explorer の方がいいですね。スイスイ動いています。

a.big:hover { background-color:#222; }

ポイントは、マウスオーバーの時に背景色を指定するようにすることのようです。背景色を指定しないと Internet Explorer では、拡大できませんでした。

サムネイル画像を表示しておき、マウスオーバーで本画像を表示させるようなやり方は、他のブログで見つけました。というか、背景色指定のコツは、そこで知りました。ぜひご覧ください。へんてこりんな仕様で悩んでしまいました。

CSS だけなので、軽いんですが、ベースラインがそろわず、微妙にうっとうしいのでどうしようか検討中。ベースラインをそろえながら拡大する方法なんてあるんだろうか。拡大したときに、下の画像が下に動いてしまうのがうっとうしい。マウスを下に移動しながら、順に拡大できないので。

JavaScript での表示は、単に document.write を使っているだけなので、何の工夫もありませんのでご了承ください。流行の Ajax はさっぱり理解していませんし、こんなところでは使えそうに無いですしね。

吐き出す JavaScript のコードをキャッシュするようにしないとなぁ。毎回、ディレクトリを読むのは無駄すぎる。

【関連情報】
・CSS で画像ポップアップ（Lucky bag::blog）
　http://www.lucky-bag.com/archives/2005/06/css_popup.html

2005年09月19日 02:50 | Development

このリストは、次のエントリーを参照しています: マウスオーバーで拡大:

» [日記]「はてな」はやっぱりすごい会社だ。 from peaceman1984の日記
　こっそりと文句を言ったからかどうかは知らないけど、はてなカウンターが前と同じく月ごとのアクセス数も解析できるようになってた。やっぱりはてなの技術力はスゲー。ろ... [続きを読む]

トラックバック時刻: 2005年12月10日 22:18

divタグを使えばいいのでは、マウスオーバーでdivタグの座標変更&中にIMGタグを吐き出すで。座標の算出がちょっと面倒そうですが。

投稿者 syachonosaru : 2005年09月19日 09:11

はじめまして
青木ともうします

現在、たくさんの画像を
ブラウズするビューワーを
PHPでつくってみてるのですが
簡単に拡大する機能を
つけたいとおもっていた矢先でした

投稿者 aoki : 2005年09月19日 15:49

拡大率がややでかすぎるような気が・・・

投稿者 Tateru : 2005年09月19日 17:26

Flash でカッコいいのを作れるようになりたいな。

投稿者 ceekz : 2005年09月20日 20:55