a:activeで画像を拡大 その２

今、このダイアリーのスタイルシートの欄にこのよう↓に書いた。

a#zoom img {
    position: absolute;
    width: 50px;
}
a#zoom:active img {
    width: 100%;  /* autoにすると元のサイズになる様子 */
    left: 25%;
    z-index: 10;
}

で、この本文にこんな感じに

<a href="#aaa" id="zoom"><img src="***.jpg"></a>

改行を入れない方がいい様子。

IE6のみの確認だが、クリックすると拡大された。
これとまったく同じ設定を、違うブログに書いてみたところ
クリックしても拡大されない。

原因は、スタイルシート内でこれとは別にa:activeを書いていたからだった。
その欄を削除したところ、きちんと拡大された。
原因がわかるまで1時間くらい掛かってしまった。

はてなダイアリーの用意されているテーマでやってみたら動作がおかしいみたい。
全部は試してないけれど、テーマがhatenaだと一応動作した。

少し数値を変更した。拡大後の幅を100%、leftを25%に。
%にするとウィンドウの幅によってサイズが変わるので面白い。

拡大後のサイズを変えたい場合

%指定
<a href="#aaa" id="zoom" style="width:50%"><img src="***.jpg"></a>

px指定　　　　　　　　　　
<a href="#aaa" id="zoom" style="width:200"><img src="***.jpg"></a>

このように書いたら調節出来た。