マウスオーバー画像変更スクリプト

マウスオーバーで画像変更スクリプト

マウス操作で画像を変更(汎用型)

Javascriptを使うことで「画像にマウスポインターを乗せて画像を変更する」ことが出来ます。やり方もとても簡単です。

マウスポインターが乗ると「onmouseover」イベントが発生し、マウスポインターが放れると「onmouseout」イベントが発せします。そこで、onmouseoverイベント発生時に画像を変更させ、onmouseoutイベント発生時に画像を元に戻せば、マウスポインターが乗っているときだけ画像変更が実現できます。詳しくは下記のソースを参照下さい。

<span onmouseover="document.画像ID.src='変更画像URL';" onmouseout="document.画像ID.src='元画像URL';">
<img name="画像ID" alt="Sample" width="100" height="100" src="元画像URL">
</span>
----
<span onmouseover="document.画像ID.src='変更画像URL';" onmouseout="document.画像ID.src='元画像URL';">
画像変更
</span>

普段通りに画像を表示するimgタグ内に「name="ch_img"」と記述し「ch_img」という名前を付けます。次にspanタグでimgタグを囲みます。そしてspanタグにマウスが乗ったときの「onmouseover="document.ch_img.src='変更画像URL';"」と離れたときの「onmouseout="document.ch_img.src='元画像URL'"」を記述します。「document.ch_img.src='画像URL';」は「ch_img」と名前が付いた画像を指定の画像に入れ換えるJavascriptの命令です。

サンプル

  画像変更

<span onmouseover="document.pid_332.src='/_file/jsmpl_mo_02.gif';" onmouseout="document.pid_332.src='/_file/jsmpl_mo_01.gif';">
<img name="pid_332" alt="Sample" width="100" height="100" src="/_file/jsmpl_mo_01.gif">
</span>
----
<span onmouseover="document.pid_332.src='/_file/jsmpl_mo_02.gif';" onmouseout="document.pid_332.src='/_file/jsmpl_mo_01.gif';">
画像変更
</span>

マウス操作で画像を変更(簡易型)

基本的に上記と同様ですが、span要素が不要でimg要素のみで簡潔します。文字にマウスを乗せると変更という形にはできませんが、画像にマウスを乗せるという形であれば、簡単に実現できます。また、「this.src='画像URL'」になっていることにも注目しましょう！

<img alt="Sample" width="100" height="100" src="元画像URL"
onmouseover="this.src='変更画像URL';" onmouseout="this.src='元画像URL'">

サンプル

楽チン画像変更スクリプト

元画像URLと変更画像URLは必須で、「[img1.gif][img1-chg.gif]」「[img/img1.gif][img/img1-chg.gif]」など分かりやすい名前の方が管理しやすいです。代替文字列・画像サイズは任意です。画像IDは自動で作成されますので指定する必要はありません。

元画像URLに静止画、変更画像に動画を指定すると見かけ上のアニメ再生機能が備わります。

元画像URL(初回表示画像、マウスポインターが離れたときの表示画像)

変更画像URL(マウスポインターが乗ったときの表示画像)

代替文字列(alt,title)・・・画像が表示されない場合の代替テキスト

画像サイズ

横 x 縦

リンク時の画像の外枠なし

リンクを張るときに画像の外枠をなくせます。

画像変更タグ作成

完成タグ1(汎用型) (作成タグをホームページに貼り付けて使いましょう！)

完成タグ2(簡易型) (作成タグをホームページに貼り付けて使いましょう！)

画像変更タグ作成スクリプトでは、Javascript(ジャバスクリプト)を利用しています。Javascriptがオフの場合はお使いになれません。

Posted By PONTA : 2005/11/23-21:26