
	マウスで色が変わるボタン

	ポップアップで小窓を開く

	プルダウンメニューでリンク

	サイトにブラウザの機能を

	時間ごとに処理を切り替える

	フォームの未入力チェック

ご意見・ご感想

ご利用上の注意

実践Webデザイン塾

格安ADSL・電話加入権

■マウスを合わせると色が変わるボタンを作ろう!

ホームページのメニューなどで使われているボタンに、マウスを合わせると色が変わることがありますよね？実際は色を変えているのではなく、マウスが合わさる度に2枚の画像を交互に入れ替えるという処理を行っています。

完成サンプル

←こちらの画像にマウスを乗せてみましょう

それでは実際に作ってみましょう

1.まずは2枚の画像を準備します

ボタン1 (デフォルト時)	ボタン2 (マウスオーバー時)
images/button_off.gif	images/button_on.gif

2.タグを記述します

以下のようなソースを記述します。ポイントは、imgタグにname属性を指定することです。これを書くことによって、JavaScript側から、特定の画像に対して指示を送ることができるようになります。
次に、アンカータグにonMouseOver="マウスを乗せた時の処理内容" onMouseOut="マウスを外した時の処理内容"というイベントハンドラ(特定のオブジェクトで何かのイベント起こった時に指定した動作を行わせる物)を書きこみます。
各イベントハンドラの中には、以下のサンプルのように画像のパスを指定します。
document.指定したname属性.src='画像のパス'

・ソース

問題なく動きましたか？この技は使い方次第で、様々なバリエーションを持たせることができると思います。今回は、色の変更しか試しておりませんが、同じような画像を2枚使わなくてはならないというわけではありません。
是非、あなた自身の手でクールな演出を試みてください。

オススメ！分かりやすいJavaScript関連書籍を最短24時間でお届け!

オススメ！格安レンタルサーバーのご紹介

【格安】月々833円で独自ドメインも使える！（株）ジェイナビ

月々833円という格安のレンタルサーバーです。プランによっては独自ドメイン(○○○.comといったURL)によるサイト運営が無料でできますので、大変コストパフォーマンスが優れています。
もちろんCGIやPHPなどにも対応しておりますので、高度なWebサイト運用にも適しています。また、メールアカウント数も無制限ですので、数多くのメールアドレスを取得したい方にも最適です。

3,000台超のサポート実績を誇る最強の専用ホスティング！
AT-LINK専用サーバ・サービス（株）リンク

本格的なWebサイトの運用を考えている方や法人の方には、専用サーバーがお勧めです。専用サーバーとは、1台のサーバーを1人のユーザーのみで運用が出来るサービスで、100人前後で切り分けて利用するレンタルサーバーに比べて安定した運用が可能になります。ページビューが多いサイトや、プログラムを使った高負荷なサイトに最適です。 (2003/06現在)

▲PageTop▲

[PR]おすすめコンテンツ：

・iアプリ検索 ・ゲーム通販 ・転職・自動車保険 ・無料着メロ ・ゲーム攻略 ・郵便番号検索 ・ショッピングモール ・健康食品 ・ダイエット ・年収

・オンラインショップ「買っ得.com」
ブランド品販売(グッチ・ティファニー)｜美容健康ダイエットサプリメント販売｜CD DVD 販売｜ゲームソフト攻略本｜雑貨インテリア｜英語教材英語学習
豆乳クッキーダイエット｜自動車保険口コミ｜通販化粧品口コミ｜ダイエット口コミ｜