サムネイルをクリックすると画像が拡大表示されるようにするには？

質問

下記のページの「SAMPLE」を、サムネイルをクリックすると、選択した画像が真ん中の段の陰付き白枠の中に拡大表示されるようにしたいです。
インラインフレームは使いたくないのでJavaScriptでできないかと思っています。
ちなみに当方はJavaScript初心者です。
白枠はcssで#subcon2というボックスの背景に設定しています。
画像については、サムネイルの画像はs01.jpg、s02.jpg・・・という名前で、拡大表示用の画像はサムネイルの名前からsを取って、01.jpg、02.jpg・・・と、名前を付けて、このhtmlと同じ階層にある「images」フォルダの中の「sample_nail」フォルダに入ってます。
この情報で足りますか？
どのようにすればいいでしょうか？よろしくお願い致します。

http://www.ac.auone-net.jp/~mrs/sample.html

回答No.2

fujillin · ベストアンサー

No1様の回答と方法は同じですが…

イメージが増減したりすることを考えると、onclickを各イメージタグに設定するのも面倒そうなのとHTMLが長くなるので、代表してsubcon3にだけ設定しておくという案です。
ついでながら、サムネイルのイメージ群のwidth、heightはCSSで指定してあるので、HTMLには不要だと思います。省いてしまったほうがHTMLがすっきりするのでは？
<img src="images/sample-nail/s01.jpg" alt="s01" />
<img src="images/sample-nail/s02.jpg" alt="s02" />
<img src="images/sample-nail/s03.jpg" alt="s03" />
　・・・
みたいに

また、ご提示のurlをOpera8.5で見るとレイアウトが乱れていました。（←よけいなお世話ですが…サムネールとフッターが重なる）

さて、本題ですが、以下の修正をしてみてください。
◆HTMLのsubcon3のdivを以下のように修正
<div id="subcon3" onclick="show(event)">

◆スクリプトを追加（head間にいれるか外部js）
<script type="text/javascript">
<!--
var oImg = new Image(); oImg.style.display='none';
window.onload = function(){document.getElementById('subcon2').appendChild(oImg);}
function show(e){
var iName = null, el, n;
el = e./*@cc_on @if (true) srcElement @else@*/ target /*@end@*/;
if (el.src) {
iName = el.src.match(/s\d+\.jpg$/);
if (iName) {
n = iName.toString();
oImg.src = el.src.replace(n,n.substr(1));
}}
oImg.style.display = iName?'inline':'none';
}
-->
</script>

なお、拡大表示部分のスタイルは、必要に応じて
#subcon2 img{　}
で指定することができます。

お礼

できました！
ありがとうございました！

回答No.1

x_jouet_x

できればサムネイル画像のファイル名を"01_s.jpg", "02_s.jpg"...のように変更して頂いた方が処理が楽になるのですが・・・。

サムネイル画像のファイル名を上記のように変更した場合、JavaScriptを以下のように記述します。

[JavaScript]
function showImage(el) {
var imageSrc = el.src.replace(/_s\.jpg$/, ".jpg");
document.getElementById("subcon2").innerHTML = '<img src="' + imageSrc + '">';
}

次にサムネイル画像がクリックされたときに上記のJavaScriptが呼ばれるようにHTMLでサムネイル画像を表示している部分を以下のように変更します。

[HTML]
<img src="images/sample-nail/01_s.jpg" width="110" height="55" alt="s01" onClick="showImage(this);"/>
<img src="images/sample-nail/02_s.jpg" width="110" height="55" alt="s02" onClick="showImage(this);"/>
…

これが一番簡単な処理かな？と思います。

何か不明な点や不具合があれば、もう一度質問して下さい。

お礼

さっそくの回答ありがとうございました！
デザインの乱れもご指摘いただき、ありがとうございました。