
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で質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Javascript初心者|jQueryの.va...
-
VBAでIEを動かす場合、下記の①...
-
jQueryで同じクラス名のものを...
-
createElementが一瞬で消えてし...
-
文字をクリックしたら別の文字...
-
JSPでの画像ファイル表示
-
オブジェクトがありませんのエラー
-
jQueryの配列の渡し方について
-
ドラックアンドドロップ?
-
「jQuery」アコーディオンメニ...
-
画像処理 C言語 元画像の幅...
-
折りたたみ式JavaScriptをcheck...
-
classの中の<a>タグにidを追加
-
2つのDIVを中央と右に横並びに...
-
javascrip 切り替えのやり方
-
lightbox2をiframeから外に表示...
-
チェックボックスの背景色って...
-
1枚の画像をクリックすると複数...
-
取得した要素がインライン要素...
-
imgのsrcに値を設定するには
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
Javascript初心者|jQueryの.va...
-
デフォルト非表示にしたい。【t...
-
javascript ランダム表示
-
ホームページ作成で画像スクロ...
-
JavaScript - 月ごとに画像変化
-
HTMLへ要素の挿入について
-
animateを使用したマウスオーバ...
-
IMGタグごとにCSSを設定する方法
-
一定時間で入れ替わるバナー画...
-
embed要素のsrc属性の値を変更...
-
アニメーションをループさせたい
-
jqueryを使用した画像スクロー...
-
clear機能を失わずにファイルア...
-
jQueryでセレクタに複数のIDを...
-
イラストのボタンを押したとき...
-
吹き出しに画像とコメントを入...
-
セレクトボックスで、リンクバ...
-
Jquery cheeckbox(複数)とsli...
-
複数bxsliderをタブで切り替え...
おすすめ情報