質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
DataSet

DataSetは、ADO.NETアーキテクチャのコンポーネントです。データベースから取得したレコードをメモリ領域に格納するクラスを指します。データの保持やテーブル間のリレーション・制約といった保持も可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

499閲覧

クリック時に画像の表示を切り替える

Iori

総合スコア55

DataSet

DataSetは、ADO.NETアーキテクチャのコンポーネントです。データベースから取得したレコードをメモリ領域に格納するクラスを指します。データの保持やテーブル間のリレーション・制約といった保持も可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2022/09/28 01:26

前提

jsの入門書でカスタムデータ属性を学んでいます。

実現したいこと

画像をクリックするとその画像を大きく表示させるようにしたいです。

発生している問題・エラーメッセージ

イメージ説明
これが初期の状態で他の画像をクリックしたら大きく表示させたいのですが、下のようになってしまいます。
イメージ説明

疑問

お手本の画像をクリックしても画像が変わらなかったのですが、なぜでしょうか...

該当のソースコード

HTML

1<!doctype html> 2<html> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <title>テンプレート</title> 8 <link href="../../_common/images/favicon.ico" rel="shortcut icon"> 9 <link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet"> 10 <link href="../../_common/css/style.css" rel="stylesheet"> 11 12 <style> 13 section img { 14 max-width: 100%; 15 } 16 17 .center { 18 margin: 0 auto 0 auto; 19 max-width: 90%; 20 width: 500px; 21 } 22 23 ul { 24 display: flex; 25 margin: 0; 26 padding: 0; 27 list-style-type: none; 28 } 29 30 li { 31 flex: 1 1 auto; 32 margin-right: 8px; 33 } 34 35 li:last-of-type { 36 margin-right: 0; 37 } 38 </style> 39 40 41</head> 42 43<body> 44 <header> 45 <div class="container"> 46 <h1>タイトル</h1> 47 <h2>サブタイトル</h2> 48 </div><!-- /.container --> 49 </header> 50 <main> 51 <div class="container"> 52 <section> 53 54 <div class="center"> 55 <div> 56 <img src="./images/img1.jpg" id="bigimg"> 57 </div> 58 59 <ul> 60 <li> <img src="./images/thumb-img1.jpg" class="thumb" data-image="img1.jpg"></li> 61 <li> <img src="./images/thumb-img2.jpg" class="thumb" data-image="img2.jpg"></li> 62 <li> <img src="./images/thumb-img3.jpg" class="thumb" data-image="img3.jpg"></li> 63 <li> <img src="./images/thumb-img4.jpg" class="thumb" data-image="img4.jpg"></li> 64 65 </ul> 66 </div> 67 68 </section> 69 </div><!-- /.container --> 70 </main> 71 <footer> 72 <div class="container"> 73 <p>JavaScript Samples</p> 74 </div><!-- /.container --> 75 </footer> 76 <script> 77 'use strict'; 78 79 const thumbs = document.querySelectorAll('.thumb'); 80 81 thumbs.forEach(function(item, index) { 82 item.onclick = function () { 83 document.getElementById('bigimg').src = this.dataset.image; 84 } 85 86 }); 87 88 </script> 89 90 91</body> 92 93</html>

お手本

HTML

1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1"> 6<title>5-04_image</title> 7<link href="../../_common/images/favicon.ico" rel="shortcut icon"> 8<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet"> 9<link href="../../_common/css/style.css" rel="stylesheet"> 10<style> 11section img { 12 max-width: 100%; 13} 14.center { 15 margin: 0 auto 0 auto; 16 max-width: 90%; 17 width: 500px; 18} 19ul { 20 display: flex; 21 margin: 0; 22 padding: 0; 23 list-style-type: none; 24} 25li { 26 flex: 1 1 auto; 27 margin-right: 6px; 28} 29li:last-of-type { 30 margin-right: 0; 31} 32</style> 33</head> 34<body> 35<header> 36<div class="container"> 37<h1>イメージの切り替え</h1> 38<h2>画像を切り替える</h2> 39</div><!-- /.container --> 40</header> 41<main> 42<div class="container"> 43<section> 44 <div class="center"> 45 <div> 46 <img src="img1.jpg" id="bigimg"> 47 </div> 48 <ul> 49 <li><img src="thumb-img1.jpg" class="thumb" data-image="img1.jpg"></li> 50 <li><img src="thumb-img2.jpg" class="thumb" data-image="img2.jpg"></li> 51 <li><img src="thumb-img3.jpg" class="thumb" data-image="img3.jpg"></li> 52 <li><img src="thumb-img4.jpg" class="thumb" data-image="img4.jpg"></li> 53 </ul> 54 </div> 55</section> 56</div><!-- /.container --> 57</main> 58<footer> 59<div class="container"> 60<p>JavaScript Samples</p> 61</div><!-- /.container --> 62</footer> 63<script> 64'use strict'; 65 66const thumbs = document.querySelectorAll('.thumb'); 67thumbs.forEach(function(item, index) { 68 item.onclick = function() { 69 } 70 document.getElementById('bigimg').src = this.dataset.image; 71}); 72</script> 73</body> 74</html> 75

試したこと

./imaegs/ を消してやってみましたが、そうするとそもそもの画像が表示されなくなりました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2022/09/28 02:48

解決された後で申し訳ないですが、明らかに本件と無関係の質問タグがあるので あとから参照する人が混乱しないためにも外しておいてもらえると。 https://teratail.com/tags/DataSet
guest

回答2

0

単純にサムネイルと実際の画像の置き場が違うのでは?
たとえばこう

html

1<img src="./images/thumb-img1.jpg" class="thumb" data-image="img1.jpg"> 2↓↓↓ 3<img src="./images/thumb-img1.jpg" class="thumb" data-image="./images/img1.jpg">

投稿2022/09/28 01:45

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

srcプロパティに代入するとき、./images/ を足す必要があるのでは。
(または、data-image 属性値に ./images/ を足しておくか)

js

1document.getElementById('bigimg').src = './images/' + this.dataset.image;

投稿2022/09/28 01:44

編集2022/09/28 01:46
int32_t

総合スコア20659

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Iori

2022/09/28 02:07

お二方ありがとうございます。ご指摘の通りdata-imageに./images/を付け足すと解決しました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問