サムネイル画像拡大表示
line
HTMLでサムネイル画像の拡大する方法はいくつかあると思うが、今回はJavaScriptをあえて使用せずCSS(スタイルシート)のみで、画像を拡大してみる。

CSSなら、JavaScriptを自由に使えないブログなどでも簡単に利用できるメリットがある。
# ただし、CSSに対応した割と新しいWebブラウザが必要となる。多分。

サンプルは↓こちら。


覚書き程度ということで、いきなりHTMLソース。
<html>
<head>
<title>sample</title>
</head>
<body>
<a class="popup" href="http://www.osadasoft.com/software/affilisearch/index.htm" >
  <style TYPE="text/css">
  <!--
  .popup{position: relative;z-index: 0;}
  .popup span{position: absolute;visibility: hidden;}
  .popup:hover span{visibility: visible;top: -100px;left: 60px;}
  -->
  </style>

  <!-- サムネイル画像 -->
  <img src="image_small.jpg" border="0" />
  <span>
    <!-- ↓拡大画像 -->
    <img src="image.jpg" border="0" />
  </span>
</a>
</body>
</html>

本来なら、CSSは<head>内で定義する。
もしくは、cssを別ファイルで定義し、<link rel=stylesheet href="StyleSheet.css">って感じで呼び出す。

だけど今回は、ブログなんかに突っ込みたいということで無理やりスタイルシートを<body>内(HTMLソース本体)に組み込んでみた。
# でも、こういう使い方はきっと各ブラウザ独自の実装であって、W3C規約に
# 当てはまってないものと思われる。面倒で調べてないけど。
# 一応、IE、FireFoxでは表示できた。