初心者です。よろしくお願いします。
いくつか並んだ小さなサムネイル画像をクリックすることで、少し離れた大きめ画像をそれぞれのサムネイル画像の拡大に変えたいです。
下記のページの答えを参考にしてやってみました。http://oshiete1.goo.ne.jp/qa1192554.html
その時は上手にできました。
ただ、それが同一ページの中に画像違いで、下にあと2つ必要なのです。
原理は同じかと思い、上手にできたものをコピーペーストしてあとの2つを作りました。
しかし、あとで作った2つの画像群の中、サムネイルをクリックすると画像が切り替わって欲しい所ではなく、別のセクションのほうの画像が切り替わってしまいます。
どうすれば思った場所の画像を切り替えられますでしょうか?
もしくは、同一ページ内で3枚という複数にターゲット画像を分けることはムリなんでしょうか?
文章が解りづらくて申し訳ございません。
No.1ベストアンサー
- 回答日時:
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function change(imgname, fname){
document.images[imgname].src=fname;
}
//-->
</script>
</head>
<body>
<img name="IMAGE1" src="A1.jpg"><br>
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
<img src="sam2.jpg" onmouseover="change('IMAGE1', 'big2.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
<img src="sam3.jpg" onmouseover="change('IMAGE1', 'big3.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
<hr>
<img name="IMAGE2" src="A2.jpg"><br>
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE2', 'A2.jpg')" >
<img src="sam2.jpg" onmouseover="change('IMAGE1', 'big2.jpg')" onmouseout="change('IMAGE2', 'A2.jpg')" >
<img src="sam3.jpg" onmouseover="change('IMAGE1', 'big3.jpg')" onmouseout="change('IMAGE2', 'A2.jpg')" >
<hr>
<img name="IMAGE3" src="A3.jpg"><br>
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE3', 'A3.jpg')" >
<img src="sam2.jpg" onmouseover="change('IMAGE1', 'big2.jpg')" onmouseout="change('IMAGE3', 'A3.jpg')" >
<img src="sam3.jpg" onmouseover="change('IMAGE1', 'big3.jpg')" onmouseout="change('IMAGE3', 'A3.jpg')" >
<hr>
</body>
</html>
まず、そのURLのサンプルは、変更する指定場所がCHANGEの一箇所である為、
function change(fname)
という関数から、場所も指定できるように
function change(imgname, fname)
というimgnameが設定できるように変更します。
それで、IMAGE1~IMAGE3の場所の画像を変更できるようになります。
場所が指定でき照るので、何箇所にも対応できます。
また、マウスが離れた時に戻る画像も参考URLでは、同じ場所で同じ画像を指定してたので、これも場所と、元に戻る画像を指定できるようにします。
ただそれだと上で作ったchangeと同じなのでrestore()はなくしちゃって、changeを使えばいいことがわかります。
それで、
<img src="sam1.jpg" onmouseover="change('IMAGE1', 'big1.jpg')" onmouseout="change('IMAGE1', 'A1.jpg')" >
上記のサムネイル画像の上にマウスが乗ったら、
change('IMAGE1', 'big1.jpg')を実行しろ
マウスが離れたらchange('IMAGE1', 'A1.jpg')を実行しろとなり
離れたイメージの画像が置き換わります。
おっと、質問者様の指定ではマウスが乗ったら出はなくてクリックでしたね。
その場合、onmouseoverではなく、onclick="change('IMAGE1', 'big1.jpg')"
とすることで、実行できます。
ついでなので、change関数の中身の説明をしますと
document.images[imgname].src=fname;
となっています。
これは、ドキュメント(ホームページ全体ですね)のイメージの[imgname]変数の中に入ってる名前の画像をfname変数の中に入っているURLに変えなさい。という命令です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
期間ごとに画像表示を切り替え...
-
画像クリックでクリップボード...
-
ボタンを押したままにする。
-
バナーのURLについて
-
[twip]から[pixel]への変換
-
クリッカブルMAP領域が分かる様...
-
web制作中にQRコードを入れるには
-
背景が透明なリンクボタンで、...
-
pngやjsの後ろの英数字の意味は...
-
画像にリンクするには? 説明す...
-
バナーの貼り方とバナーにリン...
-
クリックしても、リンクに飛ば...
-
元々あるファビコンが消えない
-
画像サイズをHTMLタグやCSSで統...
-
IMGタグでTIFF画像を表示
-
予約語の表示について
-
複数のボタンで1つのエリアに...
-
thickboxでcloseボタン右上配置...
-
Webサイト制作について相談です。
-
クリッカブルマップがうまく使...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
IMGタグでTIFF画像を表示
-
ボタンを押したままにする。
-
スライドショーの上にロゴマー...
-
背景が透明なリンクボタンで、...
-
クリッカブルMAP領域が分かる様...
-
タイトルバーに画像を入れるHTM...
-
バナーの貼り方とバナーにリン...
-
拡張子無しで画像を表示したいです
-
クリックしても、リンクに飛ば...
-
フォルダ内の画像をウェブでラ...
-
期間ごとに画像表示を切り替え...
-
pngやjsの後ろの英数字の意味は...
-
onmouseoverに複数の命令を書き...
-
「DecareステートメントにPtrSa...
-
リンク先にしているページを小...
-
画像クリックでクリップボード...
-
IE11にてonclickの動作不良
-
[twip]から[pixel]への変換
-
HTMLだけで画像をクリックして...
-
アルバムをめくるように、画像...
おすすめ情報