SSブログ

二変化 [So-net blog]

【オンマウスオーバー<ロールオーバー>】
マウスが載ったときに画像を変化させる方法です。もちろん外れたときに元に戻さないとアウトですよ。これはオンマウスアウトと言います。
まず,普通に画像を貼り付けたときのタグを見てみます。
クリックで貼り付けると,
pkao.jpg は
<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';">
とすると
pkao.jpg
と,まあこんな感じです。分かりましたでしょうか。;は無くても良いですが入れないと見えずらいです。
もっと,簡単にするには
<img src="元ファイル" onmouseover="this.src='新ファイル';" onmouseout="this.src='元ファイル';">
とすればいいです。thisというのは自分を表しています。
えっ?先に言えって・・・
nice!(34)  コメント(31)  トラックバック(1) 

nice! 34

コメント 31

yuki999

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

ムーン

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

nano

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

ぺんぎん

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

デルフィー

ロールオーバー♪
最近の流行り(?)で気になってました~。

by デルフィー (2008-10-09 07:20) 

sasapand

わかる人にはわかる。。。私は頭が痛い^^;
初心者以下ですから><;

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

junmaru

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

grace

おはようございます!
む、難しい・・・すごいですね!

by grace (2008-10-09 10:17) 

デルフィニウム

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

pearl

私には難しいです・・・

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) 

yamagatn

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

ponta

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

NEWめがね

勉強になりますッ!(`・ω・´)

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

雪猫

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

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

はだけた大将

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

goro2001

まあ、面倒でグラフィックもあまり使わないですが、使うときは見に来ます。^^;

by goro2001 (2008-10-09 20:48) 

チロ

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

miyabi25

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

にゃんたま

こんばんは~
ほほぉ~"φ(・ェ・o)~メモメモ
あ・・・メモしたけど、わからないや( ̄ロ ̄|||)

by にゃんたま (2008-10-09 23:12) 

笑いの使者

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

yuya

ブログでもこういう手繰って挿入できるのですね!
もう、ブログの仕組みがチンプンカンプンです^^;
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) 

nano

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

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

笑いの使者

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

nano

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

コメントを書く

お名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 1

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

この広告は180日新規投稿のないブログに表示されます