JavaScript初心者です。
サムネイルに画像を合わせると、IDの付いた画像2枚とテキストの3箇所が同時に入れ替える、
というものを以下の方法で作成しました。
<script>
function swap(n) {
var items = [
{ Text:"テキスト1", ImageB:"b/sample1.jpg", ImageA:"a/sample1.jpg" },
{ Text:"テキスト2", ImageB:"b/sample2.jpg", ImageA:"a/sample2.jpg" },
{ Text:"テキスト3", ImageB:"b/sample3.jpg", ImageA:"a/sample3.jpg" },
];
var o = document.getElementById("photo");
document.getElementById("Txt").innerHTML = items[n].Text;
document.getElementById("PhotoB").src = items[n].ImageB;
document.getElementById("PhotoA").src = items[n].ImageA;
}
</script>
<div id="photo">
<img src="sample1.jpg" alt="" name="PhotoB" id="PhotoB">
<img src="sample2.jpg" alt="" name="PhotoA" id="PhotoA">
<div id="Txt" name="Txt">説明文1</div>
</div>
<a href="#" onmouseover="swap(0)"><img src="sample1.jpg" /></a>
<a href="#" onmouseover="swap(1)"><img src="sample2.jpg" /></a>
<a href="#" onmouseover="swap(2)"><img src="sample3.jpg" /></a>
このセットを同一ページで複数作成したいのですが、
IDを変えたセットを作ってもうまく動かず、困っております。
知識不足で申し訳ありませんが、この場合、どのような方法でしたら
複数の画像切り替えを作れるのでしょうか?
よろしくお願い致します。
No.1ベストアンサー
- 回答日時:
回答がないみたいなので…
どのような内容が1セットで、2セット目とどこが変わるのか不明なので、考え方のみですが、
>IDを変えたセットを作ってもうまく動かず、困っております
データの内容や直接記述しているIDも含めて、スクリプトを別に作成すれば動作するはずです。
function名を同じにしていたり、呼び出す関数名を書き分けるのを忘れていたりしていませんか?
回答ありがとうございます!!!
上記のソースをまとめて1セット、画像・テキストのみ違う、もう1セットを作りたかったのです。分かりにくくて申し訳ありませんでした。
ご指摘の通り、function名を変更する等して解決することができました!
初心者のミスなのかもしれませんが、一人じゃとても行き詰まっていたので本当に感謝です。
ありがとうございました!!!!!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
このQ&Aを見た人はこんなQ&Aも見ています
-
あなたの「必」の書き順を教えてください
ふだん、どういう書き順で「必」を書いていますか? みなさんの色んな書き順を知りたいです。 画像のA~Eを使って教えてください。
-
あなたにとってのゴールデンタイムはいつですか?
一週間の中でもっともテンションが上がる「ゴールデンタイム」はいつですか? その逆で、一週間でもっとも落ち込むタイミングでも構いません。 よかったら教えて下さい!
-
忘れられない激○○料理
これまでに食べたもののなかで、もっとも「激○○」だった料理を教えて下さい。 激辛、でも激甘でも。 激ウマ、でも激マズでも。
-
2024年のうちにやっておきたいこと、ここで宣言しませんか?
2024年も残すところ50日を切りましたね。 ことしはどんな1年でしたか? 2024年のうちにやっておきたいこと、 よかったらここで宣言していってください!
-
うちのカレーにはこれが入ってる!って食材ありますか?
カレーって同じルーから作っても、家庭によって入っているものや味が微妙に違っていて面白いですよね! 「我が家のカレーにはこれが入ってるよ!」 という食材や調味料はありますか?
-
画像の下に説明文をつけて切り替えていきたい
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【大喜利】【投稿~11/22】このサンタクロースは偽物だと気付いた理由とは?
- ・お風呂の温度、何℃にしてますか?
- ・とっておきの「まかない飯」を教えて下さい!
- ・2024年のうちにやっておきたいこと、ここで宣言しませんか?
- ・いけず言葉しりとり
- ・土曜の昼、学校帰りの昼メシの思い出
- ・忘れられない激○○料理
- ・あなたにとってのゴールデンタイムはいつですか?
- ・とっておきの「夜食」教えて下さい
- ・これまでで一番「情けなかったとき」はいつですか?
- ・プリン+醤油=ウニみたいな組み合わせメニューを教えて!
- ・タイムマシーンがあったら、過去と未来どちらに行く?
- ・遅刻の「言い訳」選手権
- ・好きな和訳タイトルを教えてください
- ・うちのカレーにはこれが入ってる!って食材ありますか?
- ・おすすめのモーニング・朝食メニューを教えて!
- ・「覚え間違い」を教えてください!
- ・とっておきの手土産を教えて
- ・「平成」を感じるもの
- ・秘密基地、どこに作った?
- ・【お題】NEW演歌
- ・カンパ〜イ!←最初の1杯目、なに頼む?
- ・一回も披露したことのない豆知識
- ・これ何て呼びますか
- ・初めて自分の家と他人の家が違う、と意識した時
- ・「これはヤバかったな」という遅刻エピソード
- ・これ何て呼びますか Part2
- ・許せない心理テスト
- ・この人頭いいなと思ったエピソード
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・好きなおでんの具材ドラフト会議しましょう
- ・餃子を食べるとき、何をつけますか?
- ・あなたの「必」の書き順を教えてください
- ・ギリギリ行けるお一人様のライン
- ・10代と話して驚いたこと
- ・大人になっても苦手な食べ物、ありますか?
- ・14歳の自分に衝撃の事実を告げてください
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・あなたの習慣について教えてください!!
- ・都道府県穴埋めゲーム
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
背景色と連動するスライドショ...
-
bxsliderで最初に縦に複数表示...
-
交互に入れ替わる画像を複数配置
-
jQueryで同じクラス名のものを...
-
MAX関数を使ってからLEFT JOIN...
-
複数画像のランダム複数表示(...
-
透過pngの透明部分以外をクリッ...
-
javascriptテキストBOX色を元に...
-
Flickity で画像にリンクを貼る...
-
html内かscript内で画像出力。...
-
Firefoxで下の隙間が開く
-
ボタンを押すとオリジナルの効...
-
画像の下に説明文をつけて切り...
-
C言語のポインタ表現
-
スタイルシートで画面を上下に...
-
画像をクリックしてその地点の...
-
eclipseでcssを使うためには?
-
読み込んだQRコードをフォーム...
-
階層式メニューの設置について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
Javascript初心者|jQueryの.va...
-
JQueryでオープニングアニメー...
-
bxsliderで最初に縦に複数表示...
-
サムネイルにカーソルを合わせ...
-
複数bxsliderをタブで切り替え...
-
JavaScript - 月ごとに画像変化
-
jQueryでのドラッグアンドドロ...
-
画像のフェードイン・フェード...
-
ボタンを押すたびに交互に切り...
-
jqfloat.jsを複数の画像に適用...
-
「画像クリックで音声再生」を ...
-
JavaScriptでの画像切り替えを...
-
交互に入れ替わる画像を複数配置
-
embed要素のsrc属性の値を変更...
-
スクリプト
-
lightboxのような効果
-
jqueryで、後から追加した画像...
おすすめ情報