CSSを使って、クリックすると元のサイズに戻る方法

質問

よろしくお願いします。
写真をHPに載せるのですが、画像が大きいので次のようなことがしたいのです。
・通常はブラウザーのサイズに合わせて全体を表示。
・画像をクリックすると同じ画面内で元々のサイズの画像を表示。

いまは、フレームを使って左のフレームのサムネイルをクリックすると右フレームにJPGの画像を直接出しています。
なので、画面の大きさに関係なく大きな写真が表示されています。
これを右フレームに最初は全体表示をしておいて、それをクリックすることによって同じ右フレームに大きな元画像を表示させたいのです。
CSSでやりたいのです。よろしくお願いします。

回答No.1

coboler · ベストアンサー

<script Language="JavaScript"><!--
function chgImage(strImg) {
if (document.all[strImg].className == "imgS") {
document.all[strImg].className = "imgL";
}else {
document.all[strImg].className = "imgS";
}
}
// --></script>

<style type="text/css">
img.imgL {
width : ;
height: ;
}
img.imgS {
width : 15%;
height: 15%;
}
</style>

<img src="test.jpg" name="imgNM" class="imgS" onclick="chgImage('imgNM')">

ＣＳＳで行いたいとはこんな感じでよいのでしょうか？
何か質問あったら追記して下さい。回答できれば回答します (^^;

補足

貼り付けてみましたら、小さな画像がでてクリックで大きくなりました。わざわざコードまで書いていただきましてありがとうございます。
ところで、CSSではやはりブラウザーのサイズの大小に合わせてリアルタイムに画像を拡大縮小はできないものでしょうか？あと、書いていただいたコードではIE６では縮小画面も表示されているのですが、オペラで見ると縮小画面のほうは線のようになってしまいます。教えていただいた方法はIE専用なのでしょうか？よろしくおねがいします。