下記のページの「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ベストアンサー
- 回答日時:
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
- 回答日時:
できればサムネイル画像のファイル名を"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);"/>
…
これが一番簡単な処理かな?と思います。
何か不明な点や不具合があれば、もう一度質問して下さい。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像のランダム表示、及び画像...
-
WEBページ立ち上げ時に1回のみ...
-
表と裏がある1枚の画像を回転す...
-
onmouseで画像の切り替えについて
-
CSSで背景をランダム表示さ...
-
jQueryで特定のURLの時のみ表示
-
ページを更新しないで・・・
-
<EMBED>タグのSRCの値のみ変更
-
java scriptで現在のURLで条件分岐
-
オンマウスで画像が切り替わっ...
-
サムネイルをクリックすると画...
-
javaを使ってマウスオンでの画...
-
Javascriptで指定した日付と時...
-
オンマウスで、画像切り替え+...
-
2つの別ウインドウの表示
-
リンク先がそれぞれ別の画像の...
-
キャッシュされた画像を使わず...
-
FancyZoom (javascriptで画像拡...
-
表示する画像をファイル名を受...
-
画像の重なりの順序を代える方...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
JavaScript スライドの画像にリ...
-
bxsliderにて読み込み後に内容...
-
透過pngの透明部分以外をクリッ...
-
JavaScriptとチェックボックス...
-
クリッカブルマップの一部分だ...
-
innerHTMLで、表示すると、一部...
-
Javascriptで指定した日付と時...
-
画像をフォルダに入れれば表示...
-
1枚の画像をクリックすると複数...
-
WEBページ立ち上げ時に1回のみ...
-
image.onload = .. の後に imag...
-
美人時計風JAVAスクリプトが上...
-
曜日と時間を指定して表示画像...
-
決まった曜日で一定時間だけ表...
-
画面の表示位置を指定させて表...
-
jQuery FlexSliderのカルーセ...
-
特定の画像を非表示にする方法
-
iframe内のリンク文字のマウス...
おすすめ情報