マウスカーソルを当てて画像を変更する方法

本日のネタは、blogの裏技第２弾！

今回は、いつもお世話になっているbapioさんもよく使っている技で、
「マウスカーソルを当てると、画像が変わる方法」をご紹介します。


先日ご紹介した、
「blogのバナー画像をランダムに変更する方法」
よりは、こちらの方が簡単かと思います。


まずは、やってみましょう。
下の画像にマウスを当ててみてください。



画像が変わりましたでしょうか？
変わらない場合は、ブラウザのJava SrciptがOFFになっている
と思いますので、設定をご確認ください。


そのやり方です。

(1)画像を２枚用意してください。

(2)画像をソネブロにアップしてください。
　その際、画像への相対パス＋ファイル名をメモしてください。

(3)（記事の）新規作成を押してください。
　タイトル等はいつも通りに付けてください。

(4)下記コードをコピーし、メモ帳等にペーストしてください。
　ペースト後、＜ （全角）を < （半角）へ変更してください。
　全部で４カ所あります。

-- ここから -----------
＜SCRIPT language="JavaScript">
＜!--
image = new Array();

//マウスが離れた時の画像
image[0] = new Image();
image[0].src = "相対パス＋画像ファイル①";

//マウスが乗ったときの画像
image[1] = new Image();
image[1].src = "相対パス＋画像ファイル②";

//マウスイベント(on)
function mouse_on(){
document.myImg.src = image[1].src;
}
//マウスイベント(off)
function mouse_off(){
document.myImg.src = image[0].src;
}
//-->
＜/SCRIPT>

＜img src="相対パス＋画像ファイル①" name="myImg" border="0" align="absmiddle" onMouseOver="mouse_on()" onMouseOut="mouse_off()">

-- ここまで -----------

　次に、マウスが離れたときの画像を下記に記載してください（２カ所あります）。
　　相対パス＋画像ファイル①

　こんな感じになると思います。
　image[0].src = "/_images/blog/_6f8/locke/FA_01_009-a3cdc.jpg";

　もう１カ所あります。
＜img src="/_images/blog/_6f8/locke/FA_01_009-a3cdc.jpg" name="myImg" border="0" align="absmiddle" onMouseOver="mouse_on()" onMouseOut="mouse_off()">


　マウスが載ったときの画像を下記に記載してください。
　　相対パス＋画像ファイル②

　こんな感じになると思います。
　image[1].src = "/_images/blog/_6f8/locke/FA_01_007.jpg";


(5)記事の入力欄に、上記で作ったScriptをペーストします。
　


(6)プレビューボタンを押してください。
　　プレビューが表示されたら、画像にマウスを載せて、動作確認してください。
　


(7)動作確認後、記事を保存してください。


注）画像以外の記事は、普通に入力してもらえれば、okです。


この辺りの話は、Java Scriptを利用しています。
なので、その手の情報が記載されているHPへ行けば、
色々な技が出来るようになるでしょう。

さぁ、みなさんもチャレンジだ！！

コメント 20

先生！為になるっす！！

ロックさんってシステム系のお仕事されてるのかしら？
説明がわかりやすいなぁ。

by naka-G (2010-10-12 23:28) 

またまた為になるお話し、ありがとう御座います！
by 睦月紫音 (2010-10-12 23:38) 

先生すごいっす。

びっくりです。

by つるぎうお (2010-10-12 23:41) 

先生！面白そうですが，ネタが思い浮かばないですｗ
マウスオーバーしたら，ヨスガノソラの規制が外れる，とかくらいしかｗ
さすがにそれはできませんしねぇ。
そういえば，そんなイラスト描こうとして断念していたようなｗ
by takao (2010-10-13 00:42) 

おおおーーー
すごいですね！！
チャレンジしてみたいと思います。
by やま (2010-10-13 22:08) 

hai！

ロックさん凄いですね。

試してみたいけど時間がない感。
by ブロント (2010-10-13 22:41) 

なるほど～…と言っても、今はVBAで遊ぶのに夢中なので、
CSSにまで出を出す余裕がありません・・・
もうちょっとVBAを自由に操れるようになってから挑戦してみます＾＾；
by くま・てーとく (2010-10-14 23:01) 

ロックさん＾＾すごいです～(*^-^*)色々とお詳しいんですね～(*'-')ｂ
一度＾＾頑張ってチャレンジしみようと思います～o(^-^)o
ロックさん＾＾♡ありがとうございました～ღ(*'-')ღ
by ほちゃ (2010-10-15 01:17) 

naka-Gさん、コメントありがとうございます。

システム系よりは、その一つ下の仕事ですね。
主にWinodws系のソフトを作ってます。

仕事柄マニュアルも作ったりしますが、
基本的に「やることを単刀直入に書く」ことを
考えているので、分かりやすかったのかも？？
（自分だと、よくわからないのですがｗ）

by ロック (2010-10-16 00:58) 

睦月紫音さん、コメントありがとうございます。

睦月紫音さんはJavaにお詳しいのでしょうか。
色々と調べてみると、他にもできることがありそうですよね。

あと私がやったことがあるのは、クリックすると画像が変わる技
くらいです。これは、また記事にする予定です。

by ロック (2010-10-16 01:01) 

つるぎうおさん、コメントありがとうございます。

初めて見ると、「おお！」となりますよね。
さほど難しくありませんので、是非チャレンジをｗ

by ロック (2010-10-16 01:02) 

takaoさん、コメントありがとうございます。

ソレ、いいじゃないですかｗ
あとはドアラ関連とか、月海の凛々しい表情→デレ顔とかｗ

正直な話、感性豊かなtakaoさんなら、
すぐにいいネタが思い浮かぶと思いますよ～

by ロック (2010-10-16 01:21) 

やまさん、コメントありがとうございます。

比較的簡単な技だと思いますので、
是非チャレンジしてみてください。

初めて来た方はびっくりすると思いますヨ(^^)

by ロック (2010-10-16 01:21) 

ブロントさん、コメントありがとうございます。

そうですね、
私も時間がなくて色々苦労することもあります(^^;

もしお時間があり、この話を覚えていたら、
チャレンジしてもらえると嬉しいです。

by ロック (2010-10-16 01:22) 

くま・てーとくさん、コメントありがとうございます。

普段からVBAを使われているのですね！
とすれば、今回の話もやればすぐに出来ると思います。

ちなみに、私は、あまりVBAは詳しくありません(^^;

by ロック (2010-10-16 01:23) 

ほちゃさん、コメントありがとうございます。

いえいえ、「詳しい」という程ではないですが(^^;
１つ１つ着実に作業すれば、そんなに難しくはないと思いますので
頑張ってください。わからないことがあればお答えしますので。

by ロック (2010-10-16 01:23) 

私がどれだけ苦労してできたと思ってるんだ！！

以前からマウスオーバーやってみたくて、私も自分で調べて一日中がんばったんですよｗ
しかし全くうまくいかず、断念してたんですが、ソネブロのお友達が親切にも詳しく教えてくださいまして、事無きを得たんですが。

一番わからなかった部分がですね、
＞image[0].src = "相対パス＋画像ファイル①";
こういう感じでよく書かれてるのも見かけたんですが、この画像ファイル①って言うのが画像情報のどこまでをコピペすればいいのかよくわからなかったんですよね。

＞　こんな感じになると思います。
　image[0].src = "/_images/blog/_6f8/locke/FA_01_009-a3cdc.jpg";
こうやって書いてくれてるとすぐわかったんですけどねｗ
私の調べ方が悪かったのかもしれませんが、意外に詳しく書いてる人少ないんですよ。

by bapio (2010-10-16 11:48) 

ためになりますー！（●＞ω＜●）

また試してみますΣd(・ω・*)
by ありす (2010-10-16 20:38) 

bapioさん、コメントありがとうございます。

タイミング的に、もう少し早く書けばよかったですかねｗ

この記事もどういう風に説明するか、悩みましたが、
最初から具体的な例だと、どこを変更すれば良いのか分かり
にくいかなーと思って、一般的な例と、具体例を両方記載して
みました。このやり方で良さそうですね。

この技記事、もう１つマウスクリックネタを書く可能性アリです。

by ロック (2010-10-17 13:53) 

ありすさん、コメントありがとうございます。

今回の記事がお役に立てたでしょうか。
もしわからないことがありましたら、コメントいただければ
お答えしますので、頑張ってください(^^)

by ロック (2010-10-17 13:53)