検索サーチエンジンと動画リンク集byねっとねこ

テーブルtableの各セルtdにマウスを乗せると色が変る。onmouseover と onmouseout を使用。

スタイルシートstyleのonmouseoverとonmouseoutを使って、マウスポイント時の色を変えます。リンクに応用できます。

テーブルtable td にマウスを乗せると色が変るタグの説明

テーブルtableの td 部分にマウスをポイントすると tdの背景色が
変わります。これはよく、メニューリンクなどに使われています。
Javaスクリプトや他の方法でもできますが、ここでは
onmouseover と onmouseout を使ったやり方を説明します。

その1
その2
その3

上の背景白色のテーブルの各セルにマウスを乗せて下さい。
背景色が、それぞれ白色から黄色に変化して、
マウスポイントを離すとまた、白色に戻ります。

 このテーブルのタグは、この下です。
エリア内で 右クリック→ コピー

ここでは、<table 内に、border="1" bordercolor="#000000"を
入れています。これは、黒い外枠の線を意味してます。
枠線の色は、好みに変更して下さい。

<td 内の bgcolor="#ffffff" は、元の背景色です。
ここでは、白色を指定してます。自由に変更して下さい。
align="left" は、テキストの表示位置です。
ここでは、右寄せをしてます。center や right でも OK。

onmouseover="this.style.background='#ffff00'" は、
マウスが乗った時の色を指定してます。任意に変更して下さい。
onmouseout="this.style.background='#ffffff'" は、
マウスが離れた時の色をしてます。任意に変更して下さい。

style="font-size:10pt; padding:5px 5px 3px 10px;" は、
td 内の fontのサイズと padding: は、表示する font位置のマージン
を指定してます。padding:上px 右px 下px 左px; のマージンです。
paddingを指定することによって、td 内の好みに位置にテキストや
画像などを表示することができます。覚えておくと便利です。

次に、これを利用してリンクをしてみると下のようになります。
リンク先は、このページになってます。試しにクリックしても大丈夫

プロフィール
我家の猫ちゃん
我家の犬ちゃん

 このリンクを付けたテーブルのタグは、この下です。
エリア内で 右クリック→ コピー

リンクタグ内に、style=を指定することによって
リンクしたテキスト以外の td 内にポイントしただけで
リンクが可能になります。
style="text-decoration:none; width:100%;"
text-decoration:none; これは、通常のテキストリンクの下線などを
消す効果があります。下線付きにする場合は、消すといいです。
width:100%; を付けると、テキスト部分だけでなく
td 内の横幅全てにリンクタグが影響するので、付けるといいです。

リンクに適応する style スタイルシートは、他にもたくさんあるので
いろいろと試して見るのも勉強になると思います。

スタイルシートは、こちらを参照に
http://www.tagindex.com/stylesheet/index.html

おしまい。。。








Copyright © 2008 - 2009 ねっとねこ Net-NekoProduction. All Rights Reserved.アクセスランキング