JavaScriptを利用せずに画像を拡大表示する為の方法です。擬似要素である :hover を用いた方法は 別途 解説しています。ここでは :active を用いた方法を説明します。
/* 元画像の大きさ */
ul.pop li {width: 160px;height: 120px;}
/* 拡大後の大きさ通常ブラウザ用（li要素をクリックした後の大きさ） */
ul.pop li:active {width: 320px;height: 240px;}
/* 拡大後の大きさ。主にIE用（と場所positionのtopやleftはお好みで） */
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>
IEでは文字列をクリックすると画像がその場に拡大表示され、選択状態が解除されるまで拡大され続けます。Firefoxでは画像（li要素内）及び文字列をクリックしている間のみ拡大表示されます。OperaもFirefoxと同じ挙動ですが、こちらは最初に画像（li要素内）をクリックした場合のみ画像が消えてしまいます。二回目以降はFirefoxと同様の動作になりますし、最初に文字列をクリックした場合は消えません。おそらくCSS（の背景画像）の読み込みに問題があると思うのですが、許容範囲内ですので原因の究明は先送りにします。（Firefoxについても同様の症状が出たりしますが、キャッシュされれば解決するようです）
先ずは何でも良いのでa要素を含んだマークアップを完成させます。a要素の中身は写真のタイトル（説明）が妥当でしょう。href属性の中身についてですが、意味のない物にして下さい。ここでは #n として実在しないものを指定していますが、もっと他に良い指定法があるかもしれません。ちなみに空のままや#のみでは駄目なようです。そして次にa要素を内包する外側のブロック要素を考える訳ですが、ここでは一番それらしい ul要素 を用いる事にします。別に p要素 などでも構わないのですが、用途的にはやはりリストがそれらしいような気がします。
そしてCSSの説明ですが、最初に行うのはブロック要素の大きさの指定です。最初に表示したい画像の大きさを指定してください。次に拡大後に表示させたい画像の大きさを指定します。通常ならばこの場合 li要素 に対して :active を与えて大きさを指定すれば良いのですが、IEでは適用されない為に別途 li a:active と a要素 に対しても同じ大きさの指定をしてやります。この時に理由は良くわからないのですが position: absolute; を指定しないと上手く行きません。（topやleftの値はお好みでどうぞ。無指定でも問題はありません）
拡大前のブロックの大きさと拡大後のブロックの大きさが決まったらそれぞれに背景画像を指定してやります。この時にclass指定を用いる事によって複数の画像を使用することが可能です。また、拡大前の画像と拡大後の画像を入れ替える事ができるので、大きさ違いの同じ画像を用意しておけば、通常表示の時の表示が幾らかスムーズになるかもしれません。また、この時に注意して欲しいのが、通常のブラウザの場合はli要素がactiveになった場合に画像を拡大させれば良いのですが、IEではa要素に対してしか適用されないのでここでも別途指定してやる必要があります。
画像の大きさが均一の時は楽ですが、そうでない場合は、その大きさ毎にclass指定などを用いて拡大値を変更しなければならないので手間です。しかし逆に言えばclass指定をしてやるだけで自由に画像の大きさを変更できます。また、画像の表示位置やその方法（画面が揺れないようにするとか）についてですが『拡大後の大きさ』として指定している部分で position や top left などを加えれば調節可能です。もちろん画像に枠線を付けたりリストマーカーを消したり文字を装飾したりするのも自由ですが、中には上の指定に影響を及ぼすものもあるかと思います。
| SEO | [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送 | ||
