二変化

【オンマウスオーバー＜ロールオーバー＞】
マウスが載ったときに画像を変化させる方法です。もちろん外れたときに元に戻さないとアウトですよ。これはオンマウスアウトと言います。
まず，普通に画像を貼り付けたときのタグを見てみます。
クリックで貼り付けると，
　は
<img src="/_images/blog/_563/warainosisya/pkao.jpg" width="45" height="37" border="0" align="" alt="pkao.jpg" />
こんな感じになっていると思います。
まず，この画像に名前を付けてやります。安直ですがgazouとでもしてみます。
<img src="/_images/blog/_563/warainosisya/pkao.jpg"
width="45" height="37" border="0" align=""
alt="pkao.jpg" name="gazou" />
そこで，オンマウスオーバーの出番です。
onmouseover="document.名前.src='画像ファイル名';"
の形で先ほど名前を付けた画像をこの画像ファイル名に置き換えることが出来ます。
外れたときに戻すのはオンマウスアウトで
onmouseout="document.名前.src='画像ファイル名';"
の形で名前を付けた画像をこの画像ファイル（普通は元のファイルにするでしょう）に置き換えることが出来ます。
まとめると
<img  alt="代替テキスト" src="元ファイル" width="幅" height="高さ" border="枠の太さ" align="配置"
name="名前" onmouseover="document.名前.src='新ファイル'" onmouseout="document.名前.src= '元ファイル'">
と言う感じです。それでは使い方の例として
<img  alt="pkao.jpg" src="/_images/blog/_563/warainosisya/pkao.jpg" width="45"
height="37" border="0" align=""
name="gazou" onmouseover="document.gazou.src=
'/_images/blog/_563/warainosisya/JACK.jpg';"
onmouseout="document.gazou.src=
'/_images/blog/_563/warainosisya/pkao.jpg';">
とすると

と，まあこんな感じです。分かりましたでしょうか。;は無くても良いですが入れないと見えずらいです。
もっと，簡単にするには
<img src="元ファイル" onmouseover="this.src='新ファイル';" onmouseout="this.src='元ファイル';">
とすればいいです。thisというのは自分を表しています。
えっ？先に言えって・・・

タグ：二変化 オンマウスオーバー オンマウスアウト onmouseover onmouseout

コメント 31

なるほど、わかりました。
今度やってみます。
by yuki999 (2008-10-09 04:58) 

おっ、今日はマウスオーバーのお勉強ですね♪
by ムーン (2008-10-09 05:35) 

出ましたねｗ
さて、次は何がくるんでしょう♪
by nano (2008-10-09 05:58) 

すごい、そのうち挑戦してみみます。
by ぺんぎん (2008-10-09 06:13) 

ロールオーバー♪
最近の流行り（？）で気になってました～。
☆
by デルフィー (2008-10-09 07:20) 

わかる人にはわかる。。。私は頭が痛い＾＾；
初心者以下ですから＞＜；

by sasapand (2008-10-09 09:32) 

ほほぉなるほど・・・
すんませんっ！分かんないっす＞＜
くじ頂きマウス。
by junmaru (2008-10-09 09:48) 

おはようございます！
む、難しい・・・すごいですね！
☆
by grace (2008-10-09 10:17) 

わかりまへんがなぁー
微力＆くじしまーす。
by デルフィニウム (2008-10-09 10:22) 

私には難しいです・・・
☆
by pearl (2008-10-09 10:41) 

いつかやってみようと思いつつも、そのうちにと…。
まず、よく読んでみます。
by こぱんだつま (2008-10-09 11:00) 

わからないよ～＾＾；
仕方ないから？使者さんの当たらなそうな？くじもらってきます＾＾；
by りりー (2008-10-09 11:20) 

ロールオーバーは、画像を並べて置かなくてもいいので
便利ですよね！
使用前→使用後みたいな使い方の時とかww

by ティファロックハート (2008-10-09 13:07) 

私が説明を書く手間が省けました＾＾
私はソネットフォトを使っているので簡単な
ロールオーバーの方法なのですが
こちらだと写真の大きさが設定できないのですよね＞＜
ですから、簡単なソネットフォトを愛用しております＾＾
by yamagatn (2008-10-09 16:19) 

うっ！何がなんだかわからない・・・・
出直してきます |_ｰ).｡ｏO(理解しようとしないからいけないんだなきっと・・・)
by ponta (2008-10-09 17:08) 

勉強になりますッ！(｀・ω・´)

挑戦、挑戦♪
by ＮＥＷめがね (2008-10-09 17:10) 

ロールオーバーですね！
部活動でHP作成の時にボタンにつけて見たりしてます（笑
HP作成ソフト使用してるのでタグは関係ないんですが。

by 雪猫 (2008-10-09 18:10) 

先生っ！ヾ(；□；)э
タグばかりで、頭がショートしましたっ！
自分もHPでやってるのに…。
とっ、取りあえずクジ引きマス…。
by はだけた大将 (2008-10-09 18:11) 

まあ、面倒でグラフィックもあまり使わないですが、使うときは見に来ます。^^;
☆
by goro2001 (2008-10-09 20:48) 

こんばんは。
画像を変化させるのってこうするといいんですね。
あるブログでバナナの皮がむけるアイコンがあってやってみたかったんです。＾＾
by チロ (2008-10-09 22:24) 

最近、思うのですが、このオンマウスオーバーですか。
これをタイトルバナーに応用が出来ないのかな？
と考えたりしていますが、仕組み的には、タブをクイック
した時に色が変わるのと、あまり変わらないようですね。
by miyabi25 (2008-10-09 22:52) 

こんばんは～
ほほぉ～"φ(･ｪ･o)~ﾒﾓﾒﾓ
あ・・・メモしたけど、わからないや(￣ﾛ￣|||)
☆
by にゃんたま (2008-10-09 23:12) 

＞yuki999さんへ
ちょうどいいタイミングだったようで良かったですね。
＞ムーンさんへ
今はロールオーバーって言うのが主流みたいですね。
ああ，歳はとりたくないものです。
＞nanoさんへ
何が流行っていますか？
＞ぺんぎんさんへ
簡単なほうを利用すればすぐですよ。
＞デルフィーさんへ
取り上げようと思ってほったらかしにしていたのです。
センスがないのでどう使っていいのかがわからない・・・
＞sasapandさんへ
一番下だけ見ればいいんですよ。
上のほうは文字数かせぎですから
＞junmaruさんへ
感謝しマウス。
＞graceさんへ
利用だけなら一番下をつかえばいいですから・・・
＞デルフィニウムさんへ
そうでやんすか・・・
イマイチだったか・・・
＞pearlさんへ
理解と利用は別ですから大丈夫ですよ。
＞こぱんだつまさんへ
一番下だけでいいですよ。
＞りりーさんへ
当たらなそうって
確かにそうですが・・・
＞ティファロックハートさんへ
ははーそうですか。
マウス買ったときに写真とっておけば
剥げる前→剥げた後とかできたなぁ
＞yamagatnさんへ
たまたまいいタイミングだったようで・・・
yamagatnさんとはよく偶然が起こりますね。
私はソネットフォトがうまく使えていません。
＞pontaさんへ
無理に理解しようとしなくても・・・
＞ＮＥＷめがねさんへ
おっ！チャレンジャーですね。
頑張れ！
＞雪猫さんへ
センスがないのでどう使っていいのかが
わかりません・・・
リクエストに応えただけなんです。
＞はだけた大将さんへ
理解していなくても利用は出来ますもんね。
＞goro2001さんへ
私もです・・・
センスもないし。
＞チロさんへ
そうですか，どう使いますか。
＞miyabi25さんへ
多分出来そうですが，私も基本的なことしかしないし
出来ないので・・・
＞にゃんたまさんへ
ありゃりゃ☆
by 笑いの使者 (2008-10-10 01:17) 

ブログでもこういう手繰って挿入できるのですね！
もう、ブログの仕組みがチンプンカンプンです＾＾；
by yuya (2008-10-10 07:02) 

＞yuyaさんへ
私は，センスがないので上手く表現できません。
by 笑いの使者 (2008-10-10 22:36) 

なるほど。
なんだか難しそうですね。
私には、出来そうにありません。
by あやひな (2008-10-18 05:15) 

おじゃまします。
さっそく、バカな事をうかがいますが、
「見ながら入力」でない方を使うということなんですね。
とことん無知なものでスミマセン。

by がり (2008-10-18 21:29) 

＞あやひなさんへ
簡単にできるように新しく記事を書きました。
＞がりさんへ
<>の部分（タグ）を使って実現します。タグが実行されないように
<>は無理矢理表示させているのですよ。
by 笑いの使者 (2008-10-19 01:47) 

笑いの使者さんの影響か？功績かｗ
使われる方が増えてますね♪

画像効果の講座になるなら
よく作ってられる「Ani-Gif」の作り方もいいかも
知れませんね
私は以前2種類くらいのFreeSoft使ってましたが
最近ではスッカリ作らなくなりましたｗ
by nano (2008-10-19 04:50) 

＞nanoさんへ
わっ出た。どこでも配達します。クロナノヤマトのアイコン便。
花子で作ってるものでして・・・オススメソフト教えてください。
by 笑いの使者 (2008-10-20 01:44) 

以前使ってたのなら「Ani4gif」と「gifanim」
実に簡単でしたよｗ
by nano (2008-10-20 05:34)