下記のページの「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.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);"/>
…
これが一番簡単な処理かな?と思います。
何か不明な点や不具合があれば、もう一度質問して下さい。
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{ }
で指定することができます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) エクセルにサムネイル画像組み込み 2 2022/09/02 17:13
- YouTube ユーチューブへの動画投稿にサムネイルを付ける方法は? 1 2022/07/21 23:45
- Windows 8 Route Generator の使い方 1 2023/05/03 00:36
- フリーソフト 倍率自動調整して全画面表示できるフリーの画像ビューアー 1 2023/08/24 10:55
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- Windows 10 ファイルのサムネイルが表示されない 1 2022/08/01 05:43
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- Excel(エクセル) EXCELのグラフを画像(JPG形式)で保存、通常実行がうまく行かない。ステップインはうまく行く 3 2022/08/30 12:06
- その他(パソコン・スマホ・電化製品) アンドロイドスマホの画面にクリックするとJPG写真が開くショートカットを作りたいのですが、方法をおし 3 2023/08/27 10:01
- 画像編集・動画編集・音楽編集 エクスプローラー サムネイル表示されない 1 2022/12/22 10:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像の上に画像リンクを貼る方法
-
スライダーを実装した場合、ペ...
-
画面の表示位置を指定させて表...
-
オンマウスで、画像切り替え+...
-
残像を残しながらjpg画像を自動...
-
JAVASCRIPTでアクセス毎に画像...
-
画像クリック→メッセージボック...
-
「画像の上を流れる文字列」を...
-
小窓について教えて下さい。
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
背景色を一定時間ごとにランダ...
-
文字を固定したいのですが…
-
javascriptでURLにマウスオーバー
-
[急ぎ] videoタグで埋め込んだm...
-
文字と数字が混在する要素のsor...
-
離れた場所にマウスオーバーで...
-
ホームページビルダー15 メニュ...
-
c++std::string型をTCHARに変換...
-
タブで開いてさらにタブ内をア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
1枚の画像をクリックして複数の...
-
HTMLで条件分岐はできますか?
-
Javascript で共通の処理をどこ...
-
Gifアニメ、最後のコマに行った...
-
JavaScriptとチェックボックス...
-
画像の重なりの順序を代える方...
-
画像ランダム表示、しかしダブ...
-
javascriptで毎月替わる画像
-
1枚の画像をクリックすると複数...
-
オンマウスで、画像切り替え+...
-
透過pngの透明部分以外をクリッ...
-
Javascriptで指定した日付と時...
-
jQueryスライドショー画像への...
-
JavaScript で flexslider の画...
-
lightbox2をiframeから外に表示...
-
重なった画像にクリックイベン...
-
Twitterの埋め込みしたWebペー...
-
画像をフォルダに入れれば表示...
おすすめ情報