
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も見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascript ランダム表示
-
animateを使用したマウスオーバ...
-
ホームページ作成で画像スクロ...
-
jQueryでセレクタに複数のIDを...
-
jqueryを使用した画像スクロー...
-
時間差で画像を動作させたいjav...
-
これぞ、JavaScriptの究極の参...
-
Javascript(jQuery)のスライド...
-
cookie.jsを使ってクッキーを利...
-
lightboxのような効果
-
jqueryでHTMLを変える
-
JavaScriptが、Firefoxで動かな...
-
透過pngで作った画像がIE6で表...
-
ツリー型の目次作成
-
HTMLへ要素の挿入について
-
IMGタグごとにCSSを設定する方法
-
IE6でmax-width:100px; max-hei...
-
RSSフィードを取得して【NEW】...
-
jquery:animate中にイベントを付与
-
プルダウンメニューがうまくい...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
デフォルト非表示にしたい。【t...
-
スクリプト
-
jQueryで4枚の画像がフェードア...
-
交互に入れ替わる画像を複数配置
-
クリッカブルマップをロールオ...
-
bxsliderで最初に縦に複数表示...
-
複数bxsliderをタブで切り替え...
-
JavaScriptでの画像切り替えを...
-
「画像クリックで音声再生」を ...
-
画像切り替え
-
ボタンを押すたびに交互に切り...
-
jQuery 親要素の大きさに合わせ...
-
画像のフェードインについて・...
-
ボタンを画像に変更したい
-
画像のフェードイン・フェード...
-
アップロードファイルの種類に...
-
クリックでクリッカブルマップ...
-
Jquery cheeckbox(複数)とsli...
-
画像の切り替えについて
おすすめ情報