• 動作サンプル

ソースコード

<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 が悪さをしているのかも？