三変化

【ロールオーバー＜オンマウスオーバー＞】
前回の記事に多数お問い合わせがあったので，簡単に実現出来るように説明します。
用意する画像ファイルは2つ（もしくは3つ）です。

元ファイルは/_images/blog/_563/warainosisya/p1.jpg
変化ファイルは/_images/blog/_563/warainosisya/p5.jpg
とします。

<img src="元ファイル" onmouseover="this.src='変化ファイル';" onmouseout="this.src='元ファイル';">

↑このタグをコピーしてそれぞれ置き換えればOKです。

今の場合
<img src="/_images/blog/_563/warainosisya/p1.jpg"
onmouseover="this.src='/_images/blog/_563/warainosisya/p5.jpg';"
onmouseout="this.src='/_images/blog/_563/warainosisya/p1.jpg';">
となり，

と表示されるはずです。（もちろん色は説明の都合であり，付ける必要はありません）

<img src="元ファイル" onmouseover="this.src='変化ファイル';" onmouseout="this.src='新ファイル';">
として
<img src="/_images/blog/_563/warainosisya/p1.jpg"
onmouseover="this.src='/_images/blog/_563/warainosisya/p5.jpg';"
onmouseout="this.src='/_images/blog/_563/warainosisya/p10.jpg';">
とすると，

と表示され，三変化も可能です。（使い道があるかどうかは知りませんが・・・）

サイズ変更の例は
<img src="/_images/blog/_563/warainosisya/p1.jpg" width="90" height="74" onmouseover="this.src='/_images/blog/_563/warainosisya/p5.jpg';"
onmouseout="this.src='/_images/blog/_563/warainosisya/p10.jpg';">
で，

と表示されます。

タグ：三変化 ロールオーバー オンマウスオーバー

コメント 29

三変化は気づいて試してみました。
確かに使い道があるかどうか微妙ですね。
by yuki999 (2008-10-19 01:24) 

Ani-Gif作った方が簡単な気もしますｗ
by nano (2008-10-19 01:39) 

再度の説明ありがとうございます。
私には、まだまだ難しそうですが、
今度、機会があれば試してみます。
by あやひな (2008-10-19 06:25) 

おはようございます。
相変わらず、お詳しいですね＾＾
たまに見かけて気になっていましたが参考になりました。

by bigbang (2008-10-19 07:02) 

おはようございます。
先生～今日は良く分かりました(*ﾟ▽ﾟ)ﾉ

by にゃんたま (2008-10-19 07:59) 

まず　普通の画像をアップしようと言う
レベルですからｗ
その前に　写真も必要ですね。アハッ
ガラッと　変わるのも　面白いけど
ワイプとかMIXも　できそうですね。
どなたか見せてくれないかしら？
期待ポチ
by デルフィニウム (2008-10-19 08:20) 

３変化も出来るんですか！
使い道は・・・思いつきませんが＾＾；
面白そうです♪
by デルフィー (2008-10-19 08:32) 

おばちゃん脳になってるので＾＾；
☆
by sasapand (2008-10-19 09:27) 

すごいですね。
面白そうなので、自分でも試してみます。
by ぺんぎん (2008-10-19 10:15) 

おっw
簡単に使えるように、書いてくださっているのですね。
機会があったら、使わせていただきます。
by ティファロックハート (2008-10-19 11:49) 

ブログじゃやりませんが、
HPでボタンなどに３変化使っています♪
by ムーン (2008-10-19 12:46) 

分かりやすいでした。。　どこかで使ってみたいですが・・・＾＾　ない！？
by エリザベート (2008-10-19 13:06) 

ロールオーバーについての質問が多いので、
この記事紹介させてもらいますね。
あやひなさんは僕がブログを始める前からの
唯一の知り合いです。
お会いした事はありませんが、
とてもお世話になりました。

by yuki999 (2008-10-19 13:09) 

風邪が悪化して・・急ぎ足で応援です
すみません
☆
by grace (2008-10-19 13:21) 

おーなるほど、分かりやすくて助かります。
by こぱんだつま (2008-10-19 13:37) 

すごい知識ですね！！
☆
by pearl (2008-10-19 13:41) 

3段階も可能なのですね。
☆
by goro2001 (2008-10-19 13:42) 

おお～すごい★
でも３変化は私は使わないかも・・・＾＾；
by リカ６４１３ (2008-10-19 15:24) 

ご指導ありがとうございます。
そのうち試してみます。
by R-Month (2008-10-19 15:59) 

なるほど・・・・！
勉強になりました！
by 福留 (2008-10-19 16:27) 

おお、ちゃんと説明をしておりますなあ＾＾
お陰で私の説明記事はお蔵入りしちゃいましたのだ＾＾
でも、３変化のロールオーバーってあまり意味ないですよね＞＜
by yamagatn (2008-10-19 17:13) 

分かり易いです～(^-^)
試してみたいです
by yuya (2008-10-19 17:19) 

まだ、わからんち会長＾＾；
by りりー (2008-10-19 17:30) 

初めまして、こんばんは～♪
yuki999さんの紹介でやってきました。
なるほど、なるほど）（＠＠！）わかりやすい！
勉強になりました。ありがとうございます。ポチ
by ももぱん (2008-10-19 18:08) 

パソコンというかブログでも色んな事が出来るんですね。
勉強させて、そして楽しませていただきます。m(_ _)m
by がり (2008-10-19 21:01) 

クジいただいていきます
by しきみ (2008-10-19 23:53) 

三変化、すごいですね！
ひとつめに戻れないのがちょっと悲しい気もしますが・・・。
このまま七変化とかは無理・・・？意味無いか。。。
タグの右端が切れてしまって見えないのは私だけでしょうか・・・。
たぶんこのままでも分かる人には分かると思いますが（色があるから）
by hana* (2008-10-20 01:18) 

＞yuki999さんへ
yuki999さんならうまい使い方できますよ。
＞nanoさんへ
師匠に見てもらえないんですもの・・・
＞あやひなさんへ
う～ん，難しかったですか・・・
＞bigbangさんへ
これをどう使うかですよね・・・
＞にゃんたまさんへ
よく出来ました。あとで缶詰をあげよう。
＞デルフィニウムさんへ
画像のアップから紹介しましょうか？
＞デルフィーさんへ
そうですね，センスがないのでどう使って良いのかわかりません・・・
＞sasapandさんへ
またまた～
ブログ，使いこなしてるじゃないですか。
＞ぺんぎんさんへ
楽しみにしてます^^
＞ティファロックハートさんへ
どういうときに使ったらいいのですか？
＞ムーンさんへ
ぜひ，見せてください！
＞エリザベートさんへ
使ってみてくださいね。
＞yuki999さんへその2
構いませんよ，お花の記事はとてもよくい出来ていましたから，
やってみたいと思う人いますよね。
＞graceさんへ
お休みしたほうが良いですよ。
このブログは明日も明後日もありますから。
＞こぱんだつまさんへ
ではでは，実践を
＞pearlさんへ
いえいえ，そんな，公式のようなものです・・・
＞goro2001さんへ
可能なのですが使い道はあるのでしょうか・・・
＞リカ６４１３さんへ
どう使っていいのか，私もよく分かりません・・・
＞R-Monthさんへ
後は，センスの問題ですよね・・・
＞福留さんへ
使い道ありますか？
＞yamagatnさんへ
お蔵入りにする事はないですよ。
訪問者の数が違いますから意味ありますって！
＞yuyaさんへ
どう使います？
＞りりーさんへ
初級編もそのうち書きますからお待ちを
＞ももぱんさんへ
面白い利用を期待しています！
＞がりさんへ
タグはまだまだたくさんありますからいろいろ出来ますよ。
＞しきみさんへ
あまり期待は出来ないくじですが，どうぞどうぞ。
＞hana*さんへ
七変化だと違うタグになりますね。あれ？見えてませんか？タグは2行まとめてコピーしてくださいね。
by 笑いの使者 (2008-10-20 03:05) 

ちゃんと別のPCで見てますってばｗ
（どんなのか気になるじゃないですか？）
by nano (2008-10-20 05:42)