マウス3

100万ポイント山分け！1日5回検索で1ポイントもらえる

594154

ホーム | 日記 | プロフィール

【フォローする】【ログイン】

***　マウス３　***

ではでは次に行きましょう♪　(=^▽^=)
ここでは　マウスを重ねて『枠』を表示させてみます｡｡｡枠の種類を変える事で、ボタンのような物も作れますヨｖ

*-*-* マウスを重ねて枠を表示 *-*-*

ここで使う基本のタグはコレ↓

<a href="http://～" style="color: ■ ;font-size: □ ;text-decoration:none;"
onMouseOver=style.border=" △ " onMouseOut=style.border=" ▲ " target="_blank">
ここに文字
</a>

■	文字の色
□	文字の大きさ
△	マウスを重ねた時の枠の種類
▲	マウスを重ねた後の枠の種類（有無）

では　文字の色（ ■ ）を『#ff69b4』・文字の大きさ（ □ ）を『15』
マウスを重ねた時の枠の種類（ △ ）を『dotted』
重ねた後の枠の種類（ ▲ ）を『0』にして見てみましょう。
※マウスを重ねた時だけ　枠を表示させる時は、 ▲ の設定を『0』にします。

　枠の種類はココを見てね♪　

こんな感じになります。

*-*-* マウスを重ねて枠を表示（背景色付き） *-*-*

次は　文字の背景に色を付けてみましょう｡｡｡

↓ここで使うタグはコレ

<a href="http://～" style=" background-color:● ;color:■;font-size:□;text-decoration:none;"
onMouseOver=style.border="△" onMouseOut=style.border="▲" target="_blank">
ここに文字
</a>

上記の基本タグに『 background-color:● 』を追加しました。
『 ● 』に白（#FFFFFF）を入れて見てみると…

　枠の種類はココを見てね♪　

こんな感じになります♪　(^ー^* )

*-*-* マウスを重ねて枠を表示（背景画像付き） *-*-*

次は、背景に画像を持ってきたいと思います。
表示される部分が少ないので、なるべく小さな画像が良いですね★
大きくても切れてしまいますので…　(^_^;)

↓ここで使うタグはコレ

<a href="http://～" style=" background:url( ● ) ;color:■;font-size:□;text-decoration:none;"
onMouseOver=style.border="△" onMouseOut=style.border="▲" target="_blank">
ここに文字
</a>

同じように、基本のタグに『 background:url( ● ) 』を入れました。
● の所に、背景にする画像を指定します。
画像の倉庫から『img src="http～***"』のみをコピー＆ペーストします。
ここで気を付ける事は、 ● 以外は消さない事！
前後の（　）を消すと、読み込みが出来ませんｘｘｘｘ
それでは見てみましょう♪

　枠の種類はココを見てね♪　

元の画像→