WEBデザインのパソコンスクールのディーシーエスは生徒2人へのライブ授業

簡単なロールオーバーがあると、自然で気持ちのいいボタンとなります。
レフトナビなどのボタンを準備して、マウスを置いても何も変わらないのは、なんだか味気ないです。

こんな感じ
画像にリンクはあるけど・・・、何も変わらない。
(マウスポインタだけは指のカタチになる)
ホテル富貴の森トップページ

簡単にロールオーバーをやってみましょう!
こんな感じで・・・

画像を2枚準備して、それがマウスを置くと変わる。
こうしないとね。

リンクをテキスト書きして、背景だけを変える方法もありますが、ほとんどレフトナビは画像で作るはずです。

<a href=”#”><img onmouseover=”this.src=’最初の画像’” onmouseout=”this.src=’マウスを置いたときの画像’” src=”最初の画像” alt=”これはボタン” width=”横幅” height=”縦” /></a>
こうすれば、2枚の画像をうまく使える。

でも、それでもこのタグは画像を2枚準備しないといけません!
それが、手間がかかる・・・という人もいるはずです。
そんなときにどうするのか?

半透明にするです!

ホテル富貴の森トップページ

こんな感じになる
これだと、スタイルシートに半透明にする指示を入れこむだけ。

a:hover {
filter:Alpha(opacity=50);
-moz-opacity:0.50;
opacity:0.50;
background-color:#FFFFFF;
}

新たに半透明にした画像もつくらなくて大丈夫です。

どちらを選択するかは、手間とデザインのことを考えてにして下さい。
しかし、「詳細はこちら」などのボタンはこれで十分でしょう。

これで少し時間短縮ですね。
これが簡単ロールオーバー、半透明でした。

2018年6月
« 2月    
 123
45678910
11121314151617
18192021222324
252627282930  

* RSS FEED

このサイトのトップへ