タグ素材応用4
(テーブルボタン編)






テーブルボタンを使いたいけど色が合わないという方
今回はテーブルボタンの色を自分のホームページに
合ったカラーに変更してみましょう。

H
分かり易いように例として「テーブルボタン2」を使用します。

マウスをのせると色が変わるテーブルボタン2

テーブルボタン2



イメージとしては文字の色を「白」背景色を「緑」マウスをのせると「青」に変わり
マウスを離すと元の背景色の「緑」に戻るという色合いにします。
H
まず文字の色を変えてみましょう。
カラーコードは カラーパレットの中から選べます。

文字の色はタグの<a href="ページURL" style="color:#ff0080;"
の部分の#ff0080を白の#ffffffに変えるだけでOKです。
テーブルボタン2


の文字の色を白くすると
テーブルボタン2


白い背景に白い文字では見えないので次に背景を緑にします。
H
背景色を変えるには<tr><td bordercolor="#45607a" bgcolor="#ffffff"
の#ffffffを緑色の#009500に変えます。
テーブルボタン2


の背景色を緑にします
テーブルボタン2


背景色が緑になりましたがマウスをのせて離すとまた白に戻ってしまうので
次はマウスをのせると青、マウスを離すと緑に戻るようにしてみます。
H
マウスをのせたり、離したりして色を変えるには

マウスをのせると色が変わる onmouseover="this.style.background='#ffff00'"
マウスを離すと色が変わる onmouseout="this.style.background='#ffffff'"
の2箇所のカラーコードを青の#0080ffと背景色と同じ緑の#009500に変えます。

テーブルボタン2


マウスをのせて青に onmouseover="this.style.background='#0080ff'"
マウスを離して緑に onmouseover="this.style.background='#009500'"にします

テーブルボタン2


これで完成です♪
H
==補足説明==

このようなテーブルボタンの場合は
<div style="border:thick dotted ff80c0;width:30;">
のカラーコードff80c0を変えることで
点線や破線、二重線といった枠の色を変えられます。
(マウスで背景色などを変えるのは上記説明と同じです。)
   

の枠の色を青(#0080ff)にします

別カラーバージョンはこちら







ネットのお財布 イーバンク銀行
文章の無断転載・タグサンプルの再配布を禁止します。
Copyright © 2005-2006 hide. All Rights Reserved.
全ページリンクフリーです。