[Home] GIFアニメ工房 > HP作成の小技 > Javascriptマウスオーバー画像変更スクリプト

« 購入書籍メモMain管理人と仲良くなろう! »

当ページの概要

マウスを載せると画像を変える方法です。Javascriptを使えば簡単に実現できます。

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

HP作成の小技 > Javascript

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

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

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

同一カテゴリリンク

« 購入書籍メモMain管理人と仲良くなろう! »

トラックバックURL
コメントしてください
» 現在メッセンジャーでの会話・感想・質問など受付中!
Cookie:: 記入情報を保存しますか?
コメントとトラックバック [最新5件]
TB-536::2010/04/24-02:50:: Secret live.

【Secret live.のロゴを光らせてみました】 ・OFF ・ONカーソル …若干上品になった気がする。こういう細かいの好き...

MSG-1964::2010/02/01-10:02:: Asako

ありがとうございます!とても便利に使わせてもらいました。(^^)/

MSG-1903::2009/09/09-21:05:: PONTA@管理人

確かに。ご指摘有難うございます。先ほど修正しました。

MSG-1902::2009/09/09-09:17:: Thankyouです

はじめまして。
マウスオーバー時画像変更のソースを探して一番にここへたどりつき、参考にさせていただきました。ありがとうございました。
ところで「マウス操作で画像を変更(簡易型)」のソースの一番最後、「"」が抜けているようです。
お世話になったついでに一言ご報告です。m(_ _)m

MSG-1811::2009/02/14-23:43:: PONTA@管理人

ご指摘有難うございます。「マウス操作で画像を変更(簡易型)」のサンプルと記載コードが食い違っていましたので修正しました。正しくは「name="画像ID"」が不要で「document.画像ID.src」が「this.src」となります。

⇒ 全コメントを見る[13件]
動画アニメ入門はGIFアニメーション工房で!

©2004-2011::無料ホームページ素材作成ならGIFアニメ工房で!