サムネイル上にマウスを置くと画像が拡大される(Pure Css)_体験交流

技術的な内容は一切なく、ただ笑えるだけで、楽しむために書かれています。
Js は使用されず、純粋に Css によって制御されます。
ポップアップ画像は、その隣のコンテナを「圧迫」しません。
テストはIE7 Firefox2.11に合格しました。 (理論的には IE6 と互換性があります)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>www.jb51.net Script House マウスをサムネイルの上に置くと画像が拡大されます</title> <style type="text/css"> <!-- * {マージン:0;パディング:0;} ボディ {font-family:Verdana、Arial、Helvetica、sans-serif; font-size:12px;} img {ボーダー:0} p {font-size:14px;} #imgmove li {float:left; width:50px; height:40px; display:block; overflow:visible;*overflow:hidden; margin:0px 5px; border:3px #333 Solid;position:relative;*position:static; } #imgmove img {position:absolute;left:0px;top:0px;clip:rect(0px 50px 40px 0px);z-index: 0;*position:static;} #imgmove img:hover {位置:相対; 左:-3px; トップ:-3px; ボーダー:3px #f00 ソリッド; z-index:2; クリップ:rect(0px 137px 137px 0px);} --> </スタイル> <本文> <p>この例は、マウスをサムネイル上でスライドさせたときに画像を拡大する方法を示すように設計されています。 <!--[IE 6 の場合]><a href="#"><![endif]--> <ul id="imgmove"> <li><img src="/upload/20080203224505387.jpg" / alt="サムネイル上にマウスを置くと画像が拡大される(Pure Css)_体験交流" > <li><img src="http://img4.pcpop.com/WallImages/0x0/0/190/000190571.jpg" / alt="サムネイル上にマウスを置くと画像が拡大される(Pure Css)_体験交流" > <li><img src="/upload/20080203224554417.jpg" / alt="サムネイル上にマウスを置くと画像が拡大される(Pure Css)_体験交流" > <!--[IE 6 の場合]><![endif]--> </style>