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ランキング
-
クリックでクリッカブルマップ...
-
img 上の任意の座標範囲の色を...
-
アップロードファイルの種類に...
-
フェードインで文章を切り替え...
-
jspでcssが読み込めない
-
MAX関数を使ってからLEFT JOIN...
-
画面が真っ白になるのはどうして?
-
textareaに画像を表示したい
-
背景色を透明化
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
Jquery 親要素で順番入れ替え
-
MFCで画像を表示させているので...
-
Excel VBA マクロ 画像(...
-
表示・非表示のスクリプトで、...
-
iframe内のリンクが飛ばないの...
-
JS <a></a>タグ内のリンク先ア...
-
JimdoでWebアイコンフォントの...
-
pythonのpygameでキャラクター...
-
jQueryでクリックされた要素のi...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
Javascript初心者|jQueryの.va...
-
デフォルト非表示にしたい。【t...
-
jQueryでのドラッグアンドドロ...
-
複数bxsliderをタブで切り替え...
-
画像の表示位置
-
JavaScriptでの画像切り替えを...
-
Colorboxがうまく設置できません
-
clear機能を失わずにファイルア...
-
embed要素のsrc属性の値を変更...
-
JQueryでオープニングアニメー...
-
全部のサイコロをjavascriptで...
-
一定時間で入れ替わるバナー画...
-
JQueryで画像の上で文字を動かす
-
スクリプト
-
画像拡大とともにエレメントも...
-
JavaScript スクロール制御
-
アップロードファイルの種類に...
-
サムネイルにカーソルを合わせ...
-
htmlの中のhtmlをタブで切り替え
おすすめ情報