【niftyココログ】画像をオンマウスで拡大するCSSとhtmlタグ

サンプル

　マウスを重ねると画像が拡大されます。

サンプル追加

　マウスを重ねると画像が拡大されます。「onclick="return false;"」指定により、クリックしても別ウィンドウに画像が表示されません。

本来の画像の大きさはこちら↓。width="222" height="159" です。

これを、ココログのカスタムcssを追加して、約1/4のサイズにしています。（適当な画像を使ったので、縦横を1/2にするため、width: 111px; height: 79px; としていますが、これでは汎用性がないので、cssを適用する画像は、縦横比がほぼ同じものと決めておき、サムネイルの縦横比をあまり崩さないようにするべきです。（せいぜい、横長の画像用と縦長の画像用で2種類のclassを用意しておき、使い分けるとか。）

カスタムcssの記述は以下の通りです。class名はここではthumbnail_newとしました。marginなども、好みで変えて下さい。

a.thumbnail_new {
    display: block;
    float: left;
    margin: 0.5em 10px 0.5em 0;
}
a.thumbnail_new img{
    position: absolute;
}
a.thumbnail_new,
a.thumbnail_new img{
    width: 111px;
    height: 79px;
}
a.thumbnail_new:hover {
    border: none;
    cursor: default;
}
a.thumbnail_new:hover img {
    width: auto;
    height: auto;
}

htmlの記述は以下の通りです。画像のURLは適宜変えて下さい。

<p><a class="thumbnail_new" href="http://daishi100.cocolog-nifty.com/upload_images/ajisai_small.gif" ><img width="222" height="159" alt="サンプル" src="http://daishi100.cocolog-nifty.com/upload_images/ajisai_small.gif" /></a>　マウスを重ねると画像が拡大されます。</p>

余談ですが、サムネイルを記述した段落のあとの改行が上手くいかないので、苦肉の策（？）で、下記のようなspacerタグを入れて、横10px、高さ80pxのスペースを入れてあります。
<p><spacer width="10" height="80" type="block"></spacer></p>

追記：<spacer>タグはFirefoxでは有効ですが、Google Chrome、IE8では無視されるようです。また、あくまでも当方のココログ上での表示確認しかしておらず、他の方のココログでは上手く動作しないという報告がありました。