アクセスランキング

画像切り替え

オーバーマウス時に画像を切り替える方法。
HP上の好きな画像を切り替えます。

次の2つを使います。

document.images[n].src="1.gif";
左辺では切り替え前の画像を指しています。
右辺では切り替え後の画像を指しています。

左辺の[n]の中には数字が入ります。
例えば、document.images[0].srcのときは、HTML文書で1番初めの画像を指します。0のとき1となるのはimages[]が配列となっているためです。
"1.gif"は切り替え後に表示する画像名です。


onmouseover="関数名"
オンマウスのとき関数を呼び出します。

この上にマウスを乗せてください。
上のsampleと書いてある画像をパンダに変えます。

下の枠内をコピーして<body>内に貼り付けてください。

オーバーマウスする対象は文字だけでなく、画像でもOKです。
最後の行を変更してください。


画像切り替えを本HPで使う例はこんな感じです。→go
画像切り替えはアレンジすることでなかなか使えると思います。