以前 CSSで画像を拡大表示させる でマウスオーバー時に画像を拡大表示させる方法を書きましたが、マウスオーバーしただけで画像が拡大されるのは邪魔くさいかもしれないなと思ったので、今回はクリックしたら（アクティブ状態になったら）画像が拡大される方法について考えてみました。例によって例の如くJavaScriptは使わずにCSSのみで、確認をしたのも 閲覧想定環境 だけです。

マウスオーバーの時は :hover を用いました。今回はもちろん :active です。通常のブラウザならばimg要素に適用させて云々で簡単に済むのですが、やはりIEという禍々しいブラウザが存在します。あまり調べていないので正確ではないかもしれませんが、どうやらIEはa要素にのみ :active をサポートしているらしいです。という訳で a要素 を使用しなければなりません。しかもそれに加えて href属性 も付加しなければなら無いという始末。更に更に href属性 にURIなどの意味のある値を与えてしまうとページを移動してしまうので値は意味を持たないものにしなければならず、この時点でHTML文書の意味的に成り立ちそうもないので諦めようと思ったのですが遊びと割り切って創りました。以下がそのCSSとHTMLです。

/* 元画像の大きさ */
ul.pop li {width: 160px;height: 120px;}

/* 拡大後の大きさ通常ブラウザ用（li要素をクリックした後の大きさ） */
ul.pop li:active {width: 320px;height: 240px;}

/* 拡大後の大きさ。主にIE用（と場所positionのtopやleftはお好みで。でもposition: absolute;は消しちゃ駄目） */
ul.pop li a:active {
	width: 320px;
	height: 240px;
	position: absolute;
}

/* ↑ここでは拡大前も拡大後も全て同じ大きさの前提なのでまとめていますが、
違う大きさにしたい場合はul要素毎、もしくはli要素毎にclass指定をする事で可能です */

/* 元画像（幾らでも増やせます） */
.gij {background-image: url(gis.jpg);}
.eki {background-image: url(tos.jpg);}

/* 拡大後に表示する画像-通常ブラウザ */
li.gij:active {background-image: url(gim.jpg);}
li.eki:active {	background-image: url(tom.jpg);}

/* 拡大後に表示する画像-IE用 */
.gij a:active {background-image: url(gim.jpg);}
.eki a:active {background-image: url(tom.jpg);}

<ul class="pop">
<li class="gij"><a href="#n">国会議事堂</a></li>
<li class="eki"><a href="#n">東京駅</a></li>
</ul>

説明は苦手です。概要を述べますと、先ずはブロック要素にwidthとheight値を与えます（拡大前の大きさ）。そしてこのブロック要素の背景に縮小された画像を用います。次に拡大後の大きさを :active を用いて指定するのですが、ここからIEに対しての分岐が必要になり、わざわざ a要素 を用いなければなりません。そこでli要素をクリックした場合の拡大後の大きさ、a要素をクリックした場合の拡大後の大きさ、li要素をクリックした場合に拡大表示させる画像、a要素をクリックした場合に拡大表示させる画像、と二通りずつの指定をしなければなりません。説明はこんな所です。後はソースを見ればくだらない事をやっているなとわかるでしょう。まあ一応もう少しだけ詳しい説明とサンプルを置いておきます。

• CSSで画像をポップアップ（アクティブバージョン）

利点としてはHTMLファイルに直接画像を置かない事と、拡大前の画像と拡大後の画像を二枚用意する事で通常（大きな画像を無理やり縮小して並べたり、拡大前の画像と拡大後の画像を同時に使用した場合）よりもページの読み込みがスムーズになるかもしれない事ですが（CSS（経由）の読み込みに時間が掛かるかも）、やはりJavaScriptを使用した方が圧倒的にスマートですね。CSSだってオフにされてしまったりユーザスタイルシートを被せられてしまえば終わりになってしまいますし。しかも今回は画像自体をHTMLファイルに登場させていないので、CSSを切られてしまうと画像が表示されずに文字列だけになってしまいます。それをクリックして画像が表示されれば良いのですが、前述したように href属性 の中身に意味のある物は書けないので実現不可です。title属性などを付加して画像の説明を書いておくなんて言い訳がましい方法もありますが、やはり全体的に無理があるような気がします。とても実践向きとは言い難いですね。