自分なりにやってみているのですがどうにも解決できない状態に
なってしまいましたので教えて頂けたらと思います。
サムネイル画像をクリックすると拡大画像が表示されるjsを作成し
この仕組みを一つ設置するのは成功したのですが同じ仕組みを
同じページ内に複数設置するやり方が分かりません。
htmlは下記の様になっています。多少、省いております。
よろしくお願い致します。
<!--
myImg = new Array(0)
myImg[0] = ["img/img-1.jpg",""]
myImg[1] = ["img/img-2.jpg",""]
myImg[2] = ["img/img-3.jpg",""]
function chengeImg(i){
document.myPhoto.src = myImg[i][0];
}
//-->
<td>
<img src="img/img-1.jpg"name="myPhoto" width="500" height="400" id="myPhoto" /></td>
<td><img src="img/img-1.jpg" width="80" height="80"onmouseover="chengeImg(0)"/></td>
<td><img src="img/img-2.jpg" width="80" height="80"onmouseover="chengeImg(1)"/></td>
<td><img src="img/img-3.jpg" width="80" height="80"onmouseover="chengeImg(2)"/></td>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
こんな感じでしょうか
自分自身の画像をおきかえるならthisでわたしてやってください
この手のものはいちどimageオブジェクトを作ってやるのが常套かと。
<script>
var myImg = new Array();
myImg[0] = new Image;myImg[0].src="img/img-1.jpg";
myImg[1] = new Image;myImg[1].src="img/img-2.jpg";
myImg[2] = new Image;myImg[2].src="img/img-3.jpg";
function chengeImg(obj,i){
obj.src = myImg[i].src;
}
</script>
<img ・・・ onmouseover="chengeImg(this,0)"/></td>
yambejp様
早速の回答ありがとうございます。
長い時間困っていましたので大変助かりました。
参考にさせていただき作業してみたいと思っております。
No.1
- 回答日時:
onMouseOver ="update_src(document.main.holiday_photo, a_images[0]);"
function update_src(objects, img) {
objects.src = img.src;
}
と、どこにどれを表示という引数を2つ持つ関数にすればと思います。
Husky2007 様
貴重な回答ありがとうございました。
同じ表示の仕方でも方法は色々あるものなのですね
長い時間、あーでもないと一人で悩んでおりましたので
助かりました。本当にありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- 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】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
VC++2005で画面上にGIF画像(透...
-
imgボタンにfocusの当て方
-
文字列からある部分のみを削除...
-
外部javascriptの重複を防ぐには
-
error LNK2019 未解決のシンボ...
-
Firefoxでクリックした時の座標...
-
【OpenCV】二値画像後、白の部...
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
Javascript初心者|jQueryの.va...
-
eclipseでcssを使うためには?
-
[急ぎ] videoタグで埋め込んだm...
-
console.log結果をhtmlで表示し...
-
【CSS】floatで左右に並べた...
-
デフォルト非表示にしたい。【t...
-
画像の座標位置取得
-
キャラクターがぴょこんと飛び...
-
javascriptテキストBOX色を元に...
-
CSS 可変マージン
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
MFCで画像を表示させているので...
-
画像が表示でnull; this.src
-
Vb.net2005での画像の合成方法
-
error LNK2019 未解決のシンボ...
-
onclickで画面が固まる・・・ら...
-
リンク先を動的に変更する
-
【OpenCV】二値画像後、白の部...
-
(javascript)HTMLで指定した...
-
jQuery 複数のfind()
-
外部javascriptの重複を防ぐには
-
ラズパイでno module named zbar
-
条件分岐でキーが入力されてい...
-
かぶらないランダム画像
-
OpenCV での画素値の比較について
-
HTMLからimgのsrcのみを正規表...
-
pythonで、tkinterとpillowの組...
-
imgボタンにfocusの当て方
-
OpenCVでサンプルコードを使う...
-
指定したフォルダの画像を一括...
おすすめ情報