No.2ベストアンサー
- 回答日時:
サンプルをつくりました。
ソースなどシンプルなので解ると思います。
http://flava.whoa.jp/tmp/over_write_image/
http://flava.whoa.jp/tmp/over_write_image.zip (このサンプルソースと画像データ)
以下、サンプルソースです
======================================
<html>
<head>
<title>flip image sample - Javascript</title>
</head>
<body>
<p><img src="image/a.jpg" alt="grape" name="img_a"></p>
<p><img src="image/b.jpg" alt="apple" name="img_b"></p>
<p><img src="image/c.jpg" alt="orange" name="img_c"></p>
<p>
<a href="" onMouseover="document.img_a.src='image/a_ov.jpg'" onMouseout="document.img_a.src='image/a.jpg'">image A</a><br />
<a href="" onMouseover="document.img_b.src='image/b_ov.jpg'" onMouseout="document.img_b.src='image/b.jpg'">image B</a><br />
<a href="" onMouseover="document.img_c.src='image/c_ov.jpg'" onMouseout="document.img_c.src='image/c.jpg'">image C</a><br />
</p>
</body>
</html>
No.1
- 回答日時:
できるよー
通常javascriptでその要素を変える時はthisかidで調べて変化させるよね?
同じ事を目的の要素に対してやるだけ。(ただしthis…つまりマウスオーバーしてるそのものじゃない要素なのでidのみ)
関数を汎用的にして メニュー全部に適用したいという場合はidの付け方に法則性を持たせてthisの名前を改造するのが常套手段
例えば
this→item_01
右の画像とやら→item_01_b
…thisの名前に _b を付けると探せる
画像を入れ替えたりは そのidを導き出せればマウスオーバーした要素をいじるjavascriptとまったく一緒。
同時変更したいなら thisとその隣の要素をいじる書き方をすれば良い。
ほんとは もっと手抜きな方法があるけどちゃんとidで探していじる形にしといた方が安全だよ
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(ブラウザ) Mycrosoft Edge の「コレクション」に、画像とテキストを追加したい 2 2022/05/28 11:10
- Evernote Evernote(エバーノート)の文字化け 1 2022/04/05 19:30
- PowerPoint(パワーポイント) パワーポイント アニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
- その他(ブラウザ) テキストを入れるときの縦線の点滅がそれ以外のブラウザ上にも表れます。 1 2022/07/29 21:55
- 画像編集・動画編集・音楽編集 PhotoScapeXで黒テキストの上に画像を重ね背景を表示する方法 1 2022/12/18 19:57
- 工学 電気関係のテキストにて以下の問題が分からず、回答をお願いします 【問題文:ブレーカーがトリップしてい 3 2023/05/22 10:43
- テレビ カーナビでのドラレコ映像のモニター画質について 5 2023/04/30 14:52
- ホームページ作成・プログラミング さくらサーバーに置いているホームページを改修したいです 2 2022/11/06 17:13
- 画像編集・動画編集・音楽編集 AfterEffectでのシャターの挙動がおかしい 1 2023/05/07 00:38
- 画像編集・動画編集・音楽編集 daVinciResolveの再生プレビュー画面がカクつきます。 daVinciResolve18を 2 2023/01/20 01:35
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
以下のタグはクリックすると画...
-
Javaの正規表現でimgタグのalt...
-
プログラムの上手な書き方は?
-
画像のサムネール+フォトアルバ...
-
リンク先を動的に変更する
-
ページ更新ごとに4つの画像を...
-
htmlの記述で link rel=styles...
-
MAX関数を使ってからLEFT JOIN...
-
div要素を半透明にして且つ外枠...
-
複数の要素へ appendchild でき...
-
Javascript初心者|jQueryの.va...
-
画像の座標位置取得
-
SEO対策としての画像リンクなど...
-
【java】背景画像を一定時間で...
-
【HTML5】【canvas】【js】...
-
タイマーをデジタル時計風にす...
-
画像にマウスを乗せた時のJava ...
-
jQueryで同じクラス名のものを...
-
診断の作り方
-
JavaScript スクロール制御
マンスリーランキングこのカテゴリの人気マンスリー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でサンプルコードを使う...
-
指定したフォルダの画像を一括...
おすすめ情報