ついに夏本番!さぁ、家族でキャンプに行くぞ! >>

下記のページの「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

このQ&Aに関連する最新のQ&A

A 回答 (2件)

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{ }
で指定することができます。
    • good
    • 0
この回答へのお礼

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

お礼日時:2009/05/17 00:50

できればサムネイル画像のファイル名を"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);"/>


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

何か不明な点や不具合があれば、もう一度質問して下さい。
    • good
    • 0
この回答へのお礼

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

お礼日時:2009/05/17 00:51

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qサムネイルの画像を同ページ内のある固定された同じ場所に拡大画像を出す方法について

私自身ホームページに関する専門用語をほとんど知らないため
正確に私の意志をお伝えすることが出来ないかもしれませんが、どうか、お力添えのほどよろしくお願いします。

下記のURL
http://www.alan1.net/jp/hawaii/oahu/sg/106/ag/5641/
にあるように、サムネイルのいずれの画像(小さい)をクリックしても、同ページ内のある固定された同じ場所に拡大した画像(大きい)を出す方法を教えていただけないでしょうか?

申し訳ございませんがよろしくお願いいたします。

Aベストアンサー

こんにちは

#画像を変換する処理です#
<script language="JavaScript">
<!--
function Image(img) {  document.getElementById("image").src = img; }
//-->
</script>

#提示サイトの小さい画像にあたる部分です#
<img src="sample1.gif" onClick="Image('sample1.gif')">
<img src="sample2.gif" onClick="Image('sample2.gif')">
<img src="sample3.gif" onClick="Image('sample3.gif')">
<img src="sample4.gif" onClick="Image('sample4.gif')">

#提示サイトの大きい画像にあたる部分です#
<img src="sample0.gif" name="image" width="100px" height="100px" border="1">


#~~#の部分は説明なので削除してコピペしてくださいね(^^)
あとそちらで変更してもらうのは画像の名前です
sample○.gifの部分を画像のファイル名に変えてください
画像をフォルダ内に入れているのであれば (フォルダ名)/(画像名) のようにしてください

こんにちは

#画像を変換する処理です#
<script language="JavaScript">
<!--
function Image(img) {  document.getElementById("image").src = img; }
//-->
</script>

#提示サイトの小さい画像にあたる部分です#
<img src="sample1.gif" onClick="Image('sample1.gif')">
<img src="sample2.gif" onClick="Image('sample2.gif')">
<img src="sample3.gif" onClick="Image('sample3.gif')">
<img src="sample4.gif" onClick="Image('sample4.gif')">

#提示サイトの大きい画像にあたる部分...続きを読む

Qサムネイル画像をクリックすると拡大画像を表示させる方法

今はまずサーバに同一画像の小さい写真(サムネイル用)と大きい写真の両方をアップロードして、
小さい画像を表示させて、そこにリンクをつけて大きい画像のURLへとばすようにタグを書いているのですが、これでは同じ写真を2枚アップロードしなくてはいけず、面倒です。

1枚の写真だけをアップロードしてサムネイル画像を表示させて、クリックしたら拡大写真がでるようにするためにはどのようなタグを使えばいいのでしょうか?

Aベストアンサー

サムネイル表示するときだけ画像表示のサイズ指定をしてやればよいですね。

<a href="aaa.jpg"><img src="aaa.jpg" width="ピクセル数または%" height="ピクセル数または%"></a>

ただし、お分かりのように基の大きな画像を読み込んで表示だけ小さくする訳ですから、通信回線が遅かったり画像数が多いとサムネイル用の画像を用意したときよりも表示が遅くなります。


人気Q&Aランキング