--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2006年07月30日

ロールオーバーを使ってみましょう。(JS初級)

マウスを当てると画像が変化するロールオーバーを使って遊んでみました(*^-^)
設定は簡単ですよ。
<img src="最初に表示したい画像のURL"
onmouseover="this.src='マウスをあてたときに表示したい画像URL'"
onmouseout="this.src='マウスを離したときに表示したい画像URL'"
alt="画像の代わりの文字" width="幅" height="高さ" />

※これは説明の都合で4行になっていますが、実際は半角スペースでつながった1行です。
ロールオーバーは通常、「最初に表示したい画像のURL」と「マウスを離したときに表示したい画像URL」を同じ画像にします。
また、使用する画像のサイズ(width="幅" height="高さ")は、全部同じサイズのものにしてください。


ロールオーバーの見本
最初の画像に戻ります


↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

スレッドテーマ:パソコン初心者:コンピュータ

メイン

≪New MENSAのWorkout久々のクイズです♪ | Top | BlogPetキリぺたのカウプレいただきました♪ Old≫

トラックバックURL


コメント

yozoさん、トラバおそくなりましてm(・ω・`m)ゴメンチャ
こういう基本的なことを~~。。。凹○コテッ
送信させていただきましたのでお知らせでーす(。・ω・。)ゞピッ♪

コメント

>モンビッケさん、こんばんはー♪

>yozoさん、トラバおそくなりましてm(・ω・`m)ゴメンチャ
いえいえ♪こちらこそ、催促してお手間取らせました。m(_ _)m
紹介してくださったので、試作品だったロールオーバーの見本を
ブレのないものにやり替えましたよ。モンビッケさんに恥をかかせる
わけにはいかないですからね。(゚-゚*)(。。*)ウンウン
トラバ返してくださってありがとーございまっす♪m(_ _)m

コメント

yozoさんおはようございまーす!
お知らせありがとうございました!
以前は3行だったけど4行になってたのですねφ(・ω・*)フムフムφ(。_。*)メモメモ
この属性・・普通のhtmlでも同じように表記すれば大丈夫なんでしょうかね・・
最後の「半角スペース+スラッシュ」を省けばいいのかなぁ・・・
すみません;;お知らせいただいたのに質問になっちゃいました・・
というのも、テンプレート自体がまだXHTMLじゃないのですよ(・ω・;A)アセアセ…
テンプレートをXTMLに書き替えればいいのかもしれないのですが
戦うにはかり時間がかかりそうなので、先延ばしになっている次第です^^;;

コメント

>モンビッケさん、こんにちはー♪
早速見に来てくださったのですね。ありがとーございまっす♪m(_ _)m

>この属性・・普通のhtmlでも同じように表記すれば大丈夫なんでしょうかね・・
>最後の「半角スペース+スラッシュ」を省けばいいのかなぁ・・・
おっー!そうでしたね。モンビッケさんのテンプレは、
HTML4.01 Transitionalでしたね。(; ̄ー ̄A アセアセ・・・
ご質問の通りです。最後の「半角スペース+スラッシュ」を省けばOKですよ。
ドタバタさせちゃってごめんなさいでした m(_ _)m

コメント

yozoさん(。・ω・。)ノコンチャ☆・゚:*:゚
解説ありがとうございますー!
早速次回からこのページを参照しつつ(もうブックマーク更新しちゃいました♪(ノ∀`)ウフ
ロールオーバーを使いたいと思います(。・ω・。)ゞピッ♪
> ドタバタさせちゃって
いえいえ、とんでもないです。大変勉強になりますし
今までは画像サイズも入れていなかったので、また一歩躍進できます!
わぁ━━ヽ(。・ω・。)ノ━━ぃ!!

コメント

>モンビッケさん、こんばんはー♪

>解説ありがとうございますー!早速次回からこのページを
>参照しつつ(もうブックマーク更新しちゃいました♪
いえいえ♪こちらこそ大変勉強になります。なかなかWeb構築の経験不足なもので、三歩進んで二歩退くという感じですね。(; ̄ー ̄A アセアセ・・・

>ロールオーバーを使いたいと思います(。・ω・。)ゞピッ♪
とても上手につかってるので、yozoも勉強になります。(*^-^)

>今までは画像サイズも入れていなかったので、また一歩躍進できます!
alt、width、heightを入れるところまでは同じですからね。
誰にでも優しいブログ作りができればいいですよね(゚-゚*)(。。*)ウンウン

コメント

yozoさん、こんにちヮ~♪コメントをありがとうございましたっ♪
ウッキはダメです・・・無作法すぎましたね・・・m(_ _"m)
うまくいくか心配だったので、成功して皆さんに見えていたら
別記事でyozoさんをご紹介しようとしたのですが・・・
先にyozoさんが見つけてくれました(T-T)
とても嬉しく・・・そしてご挨拶を先にするべきだったのに申し訳なく・・・m(_ _"m)
いつもありがとうございますm(_ _"m) 
ご覧いただいたように、class="○○"と align="left"を追加してやってみました♪
宿題ひとつクリアでっすm(_ _"m)

コメント

度々失礼しまっすm(_ _"m) ちょうど初雪が降って
2枚の画像を載せる記事ができました♪
TB送信させていただきますので、不手際がありましたらご指摘いただければと思います
宜しくお願いいたしまっすm(_ _"m)

コメント

>ウッキさん、こんにちはー♪

>yozoさん、こんにちヮ~♪コメントをありがとうございましたっ♪
いえいえ♪たまたまお邪魔したら、ロールオーバーでしたからね♪
うまくできていましたね♪(*゚ー゚)(*。_。)ウンウン♪(゚ー゚*)(。_。*)ウンウン♪

>ウッキはダメです・・・無作法すぎましたね・・・m(_ _"m)
いえいえ♪そんなことは・・・yozoの記事を参考にしてくださっていたのですね♪ロールオーバーの解説なら、あちこちでも説明されていますから。お気になさらないでくださいね♪(^○^)

>ご覧いただいたように、class="○○"と align="left"を追加してやってみました♪
align="left"はclass="○○"のCSSコードの中にfloat:left;とした方がXHTML準拠の書き方になりますよ。ご参考までに。m(_ _)m

コメント

>ウッキさん、わぁ♪ こんにちはー♪
たった今レスコメントを投稿したら、ウッキさんのコメントが入ってビックリしました(*^-^)

>ちょうど初雪が降って2枚の画像を載せる記事ができました♪
そのようですね。たった今、お邪魔させていただいたところです。(^○^)
不手際等はございませんよ。丁寧に紹介していただき、その上、TBまで入れていただいて、ありがとーございまっす♪ 参考にしてくださってうれしいですよ♪ m(_ _)m

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。