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専用なのでしょうか？よろしくおねがいします。

回答No.3

coboler

No.1です。

ＣＳＳでは「クリックした」などのイベントを拾えないため
動的に画像の大きさを変化させるのは無理だと思います。

また、オペラで上手くいかないとのことですが、私の方の環境
(Opera@USB ver8.54)では普通に見れています。なのでバージョン
のせいかオペラの設定によるものだと思われます。

その他の原因としてはＣＳＳの％設定だと思われますので、％では
なくpx設定で確認してみて下さい。

これでもダメだった場合は…力及ばずといったところです。

お礼

PXで指定するとオペラでも正常に表示できました。
自動でサイズ指定は叶いませんでしたが、十分希望に近いものができそうです。いろいろとありがとうございました。

回答No.2

koutarou504

＞CSSでやりたいのです。よろしくお願いします。
CSS だけだと困難だと思います。あきらめましょう・・・。
JavaScript なら容易に実現可能ですが。

ポイントは「画像をクリックすると」これをどの様にブラウザ側に渡すのか？
Ａ要素に擬似クラスで a:active がありますが、画像をとの事で IMG要素を用いる事となり、少々実現が困難かと・・・。
まぁ、技術的にはＩＭＧ要素を用いずにＡ要素の背景とする事で可能なのは確かです。いろいろ細工は必要ですが。しかも意味的に不適切な行為なので、あまりお勧めしたくはないですねぇ。

以上の事から、JavaScript での実現をお勧めします。
まぁ JavaScript が無効だったらとか閲覧環境を気にされるのでしたら、
CSS も同じく無効にできたりと閲覧環境への配慮は必要です。
というか、CSS を用いるという事は、CSS が無効でも見れる（観れるかどうかは別として）ページという事で、代わりに JavaScript を用いたとしてそれが無効でも問題ないページと思いますが・・・・・。

お礼

インストールされた状態のままのブラウザでセキュリティロックが出さないためjavascriptは使いたくないと思ったわけです。Cssならセキュリティロックが出ませんよね。というわけなんです。回答ありがとうございます。