マウスオーバーで画像変更スクリプト
マウス操作で画像を変更(汎用型)
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 name="画像ID" alt="Sample" width="100" height="100" src="元画像URL"
onmouseover="document.画像ID.src='変更画像URL';" onmouseout="document.画像ID.src='元画像URL'>
サンプル
楽チン画像変更スクリプト
元画像URLと変更画像URLは必須で、「[img1.gif][img1-chg.gif]」「[img/img1.gif][img/img1-chg.gif]」など分かりやすい名前の方が管理しやすいです。代替文字列・画像サイズは任意です。画像IDは自動で作成されますので指定する必要はありません。
元画像URLに静止画、変更画像に動画を指定すると見かけ上のアニメ再生機能が備わります。
画像変更タグ作成スクリプトでは、Javascript(ジャバスクリプト)を利用しています。Javascriptがオフの場合はお使いになれません。
Posted By PONTA : 2005/11/23-21:26
＞medacaさん。
ローカルにコピーすると正常動作するのでサーバに問題ありそうです。サーバの仕様（外部画像呼出禁止等）を調べてみてください。
初めまして。
マウスオーバーのjavacriptを参考にさせていただきました。
私個人の環境はMACで、マウスオーバーが問題なく作動するのですが、WIN上でover時の画像が表示されなくなります。言語の問題のようにも思えたのでshiftJIS,EUC,UFT8等テキストフォーマットをかえて試してみたのですがうまく行きません（素人考えによる試行
で、無意味かもしれません）。画像は上記とは別のサーバーにアップしてURLはhttp://image.webftp.jp/design/gcom920/else/image/yagi.gif(/yagi_coment.gif)です。
上記システムのサーバーですとアドレスがhttps://~となりオープンサーバーでないような気がしたのと、ここのシステム上CSSが使えないのでフルURLにするためにも
別サーバーにしました。何かお気づきのことがありました教えていただけると幸いです。
質問があったので追記しておきます。
自分のパソコンで作成して表示させると、IEの情報バーに「セキュリティ保護のため、コンピュータにアクセスできるアクティブコンテンツは表示されないよう、Internet Explorerで制限されています。オプションを表示するには、ここをクリックしてください...」と出ますがホームページにアップロードすれば情報バーは表示されなくなります。
また、セキュリティ的にはよろしくありませんがIEのメニューバーから「ツール＞インターネットオプション＞詳細設定＞セキュリティ＞マイコンピュータのファイルでのアクティブコンテンツの実行を許可する」にチェックをいれると情報バーは表示されなくなります。
「マウス操作で画像を変更(汎用型)」のサンプルを追記しました。画像ID（赤い部分）を同じにして文字の部分を画像にすれば実現できます。
はじめまして。画像のマウスオーバー、参考になりました。ありがとうございます。ところで、画像のマウスオーバーで、離れた位置の画像を変更することはできるのでしょうか？