[CSS] 画像ポップアップ

Posted by
ぴろり
Posted at
2007/04/11 02:41
Comments
コメント (1)
Post Comment
コメントできます
Category
開発メモ カテゴリ

 CSSだけで画像のポップアップを参考にしてCSSを色々といじってみた覚書。リンク先は Negative Margin を使う方法ですが、display プロパティで可視・不可視を切り替えるようにしてみました。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

ソースコード

<style>
.popup a img {
	position: absolute; /* img は a を基準にした絶対位置指定 */
	top: 2em;
	left: 3em;
	display: none; /* 最初は不可視状態 */
}

/*.popup a:hover { IE で動作せず? */
.popup a:hover {
	position: relative; /* a img の absolute 指定のため */
}

.popup a:hover img{
	display: block; /* マウスオーバーで可視状態になる */
}
</style>

<span class="popup">
  <a href="#">
マウスオーバーで画像がポップアップ
    <img src="http://img.simpleapi.net/small/http://www.magicvox.net/home.php">
  </a>
</span>

 参照元に現われていた-10000pxというマジックナンバーが消え、できるだけ少ないプロパティ値だけで構成できるようにしてみました。Windows XP の Firefox 1.5、Internet Explorer 6.0, Netscape 7.1, Opera 9.1で動作確認済み。ただし Netscape と Opera ではポップアップした画像の右端と下端が切れて表示され、リンクをクリックすると全体が表示されるようになります。border が悪さをしているのかも?

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  



寄せられたコメント (全 1 件中、最新 5 件まで表示しています)

Posted by
cupcup
at
2007/05/31 06:34
ID
VjY3gslg
この方法で、テキストリンクではなく、画像にリンクする方法
はないですか。。
それに、サムネイル画像をずらっと複数並べたとき、
サムネイル画像の下にポップアップ隠れてしまう方法しかなく、
困ってます・・。
解決方法があれば教えてもらえませんか?

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。