こんにちは。
久しぶりにWEBネタをUPします。
ホームページでボタンにマウスをのせるとボタンの色や
形状が変わったりする効果を見たことがありますでしょうか？
こちらをクリック↓
これはロールオーバーという設定でHP制作に使うDreamweaverと
いうソフトを使えばカンタンに作成できます。
が、その方法だとJavascriptという言語が自動的にhtmlソースに
記述されてしまいます。今まではメニューバーなどをロールオーバーさせたい場合は
Javascriptを使うのが一般的でしたがJavascriptをhtmlに組み込んでしまうと
htmlが複雑になってしまうだけでなく、ページの表示が遅くなります。
出来ればCSS仕様で作った方がベターです。
今日はそのCSSを使ってロールオーバーを作る方法を紹介したいと思います。
まずはPhotoshopやIllustratorなどグラフィックソフトを使って
以下のようなマウスを乗せる前用と乗せた時用、2つのボタンを用意します。
（サイズは同じにしてください。ここでは100px×30pxで作成しています）
ボタン名は通常表示用の【a.jpg】、ロールオーバー時の【a_over.jpg】
以下それぞれ【i.jpg】【u.jpg】【e.jpg】【o.jpg】としています。
2 comments