テキストにマウスオーバーで画像を変える方法

解決済

質問者：geothermal
質問日時：2010/06/08 13:56
回答数：2件

テキストにマウスオーバーで画像を変える方法

左のナビの例えば、ぶどうのテキストにマウスオーバーした時に、それに連動して右のぶどうの画像のコントラストを高くすることはjava scriptではできるのでしょうか？

もちろん画像のコントラストを高めた画像は用意しますので、要はcssのロールオーバーみたいなことをテキストと連動して行いたいです。

ご回答をどうかよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： bloodybell
回答日時：2010/06/08 14:50

サンプルをつくりました。

ソースなどシンプルなので解ると思います。

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>

<img src="image/a.jpg" alt="grape" name="img_a">
<img src="image/b.jpg" alt="apple" name="img_b">
<img src="image/c.jpg" alt="orange" name="img_c">


<a href="" onMouseover="document.img_a.src='image/a_ov.jpg'" onMouseout="document.img_a.src='image/a.jpg'">image A</a> 
<a href="" onMouseover="document.img_b.src='image/b_ov.jpg'" onMouseout="document.img_b.src='image/b.jpg'">image B</a> 
<a href="" onMouseover="document.img_c.src='image/c_ov.jpg'" onMouseout="document.img_c.src='image/c.jpg'">image C</a> 


</body>
</html>

- 0
- 件

通報する

この回答へのお礼

思った通りの動きになりました。
ありがとうございます。

通報する

お礼日時：2010/06/08 22:22

No.1

回答者： SAYKA
回答日時：2010/06/08 14:09

できるよー

通常javascriptでその要素を変える時はthisかidで調べて変化させるよね？
同じ事を目的の要素に対してやるだけ。(ただしthis…つまりマウスオーバーしてるそのものじゃない要素なのでidのみ)
関数を汎用的にして　メニュー全部に適用したいという場合はidの付け方に法則性を持たせてthisの名前を改造するのが常套手段

例えば
this→item_01
右の画像とやら→item_01_b
　…thisの名前に _b を付けると探せる

画像を入れ替えたりは　そのidを導き出せればマウスオーバーした要素をいじるjavascriptとまったく一緒。
同時変更したいなら　thisとその隣の要素をいじる書き方をすれば良い。

ほんとは　もっと手抜きな方法があるけどちゃんとidで探していじる形にしといた方が安全だよ