リンクボタンと画像を同時に変更するには?



0   名前: nobu : 2005/07/07 10:09
オンマウスでリンクボタンの画像を変えるようにしているのですが、
さらに違う場所にある写真等の画像もいっしょに変え、
リンクボタンからカーソルを離せば元の画像に戻る。
という感じにしたいなと思っています。


ド素人なりにいろいろ調べてみたのですがまったく分かりません。
どなたかご指導よろしくお願いします!

1   名前: 元帥 : 2005/07/07 10:09  [URL
> オンマウスでリンクボタンの画像を変えるようにしているのですが、
> さらに違う場所にある写真等の画像もいっしょに変え、
> リンクボタンからカーソルを離せば元の画像に戻る。
> という感じにしたいなと思っています。
>
>
> ド素人なりにいろいろ調べてみたのですがまったく分かりません。
> どなたかご指導よろしくお願いします!

どこまで分かって、どこが分からないのか。
http://www.tagindex.com/javascript/link/index.html
このサイトにも参考になるソースはありますし。

ここまでは記述できた、という感じにソースを提示していただく方がアドバイスは得られ易いと思います。


2   名前: nobu : 2005/07/07 10:09
質問がわかりづらくてすいません。
ソースはまったく理解できていないのでコピぺして使っている状況です。

リンクボタンの画像を切り替えるのは
http://www.tagindex.com/javascript/link/change1.html
のソースを使わせていただきました。

あと、他の場所にある画像も切り替えるというのも
http://www.tagindex.com/javascript/link/change3.html
のソースを使わせていただき、これらをいっしょに使おうと思っていたのですが、
そのやり方がわかりません。

ポイント時に画像を切りかえる(3)のNEW YORK、LONDON…と書いてあるポイント部分を
ポイント時に画像を切りかえる(1)のリンクボタンにしたいと思っています。

3   名前: nqou : 2005/07/07 10:09
実験

js> function On (a, b) { return a + b }
js> On(3, 4)
7
js> function On (a, b) { return a - b }
js> On(3, 4)
-1
js> function On1 (a, b) { return a * b }
js> On(3, 4); On1(3, 4)
-1
12
js> On(3, 4), On1(3, 4)
-1
12

関数を同じ名前で定義すると後出のもので書き換えられるらしい.
複数の関数呼び出しを ; や , で区切ると順番に実行されるようだ.

4   名前: 元帥 : 2005/07/07 10:09  [URL
サンプルは中途半端に同じ識別子だったりしたもので、ちょっと変更しました。
スクリプト冒頭の変数にファイル名追加or変更、タグのメニュー追加等で適当に改造して下さい。

/*JavaScript*/
var img_start="start.gif";
var img_def = new Array("newyork.gif","london.gif","yokohama.gif");
var img_off = new Array("1off.gif","2off.gif","3off.gif");
var img_on = new Array("1on.gif","2on.gif","3on.gif");

function on(num){
document.images['img'+num].src=img_on[num-1];
document.images['def'].src=img_def[num-1];
}

function off(num){
document.images['img'+num].src=img_off[num-1];
document.images['def'].src=img_start;
}


/*HTML*/
<img src="start.gif" alt="" name="def">
<a href="" onMouseOver="on(1)" onMouseOut="off(1)"><img src="1off.gif" alt="" name="img1"></a>
<a href="" onMouseOver="on(2)" onMouseOut="off(2)"><img src="2off.gif" alt="" name="img2"></a>
<a href="" onMouseOver="on(3)" onMouseOut="off(3)"><img src="3off.gif" alt="" name="img3"></a>


5   名前: nobu : 2005/07/07 10:09
返信が遅れてすみません!

元帥さんのを元にいろいろいじってみたら、思っていたとおりのものができました。

ありがとうございます!

一覧へ戻る