タグだけで作るDHTML
ほとんどタグだけで作るDHTML。タグだけでここまでできちゃうなんて凄い!
各種タグの style属性を設定することででいろんな効果をだすことができます。
(ただしIEのみ)
1 Style 属性の設定
Style属性の設定は、以下のように記述します。
Filterを文字に使用する時は、必ずPOSITIONをabsoluteに設定します。
文字を波にする
|
<span style="POSITION:absolute;filter:wave(add=0,freq=4,LightStrenght=100,Phase=0,Strength=3);">文字を波にする</span> |
文字を波にする
|
<span style="POSITION:absolute;filter:wave(add=0,freq=4,LightStrenght=100,Phase=0,Strength=2);">文字を波にする</span> |
2 マウスをのせることで、表示を変化させます。
OnMouseover
イベントで、マウスののった時の表示を変化させます。
下記の文字にマウスをのせて見て下さい
**実例** マウスをのせて下さい |
|
フォントカラーの変化 | <span style="color:blue;"
onmouseover="this.style.color='orange'"
onmouseout="this.style.color='blue'">フォントカラーの変化</span> style の color プロパティを設定する |
背景,フォントの変化 | <span
onmouseover="this.style.background='pink';this.style.fontWeight='bold';"
onmouseout="this.style.background='yellow';this.style.fontWeight='normal';">背景,フォントの変化</span> style の background, fontweight プロパティを設定する |
半透明にする |
<span style="POSITION:absolute;"
onmouseover="this.style.filter='Alpha(Opacity=30
style=1)'"
onmouseout="this.style.filter='nothing'">
半透明にする </span> 文字にfilter をかける時は、POSITIONをabsoluteに設定します。Opacityに透明度を設定 します。0で透明。 |
影をつける |
<span style="POSITION:absolute;"
onmouseover="this.style.filter='Shadow(color=red,
Direction=135)'"
onmouseout="this.style.filter='nothing'">
影をつける</span> colorに色(RGB値でも良い)、direction に影の方向(45°単位)を指定します |
WAVEをつける |
<span style="POSITION:absolute;"
onmouseover="this.style.filter='Wave(Add=0,
Freq=4,LightStrength=100,Phase=0,Strength=2)'"
onmouseout="this.style.filter='nothing'">
WAVEをつける</span> Add 元のデータと重ねるか (1 重ねる 0 重ねない) Freq 波の数 Strength 波の振幅(数値が大きいほど大) |
ぶれをつける |
<span style="POSITION:absolute;"
onmouseover="this.style.filter='Blur(Add=1,Direction=90,Strength=4)'"
onmouseout="this.style.filter='nothing'">
ぶれをつける</span> Add 元のデータと重ねるか(1 重ねる) Direction ブレの方向 Strength ブレの強さ |
緑に発光する |
<span style="POSITION:absolute;" onmouseover="this.style.filter='Glow(Color=green,Strength=10)'" onmouseout="this.style.filter='nothing'"> 緑に発光する</span> color 発光する色 Strength 強さ |
横方向反転 |
<span style="POSITION:absolute;" onmouseover="this.style.filter='FlipH()'" onmouseout="this.style.filter='nothing'"> 横方向反転</span></font> |
縦方向反転 |
<span style="POSITION:absolute;" onmouseover="this.style.filter='FlipV()'" onmouseout="this.style.filter='nothing'"> 縦方向反転</span> |
色の反転 |
<span style="POSITION:absolute;" onmouseover="this.style.filter='Invert()'" onmouseout="this.style.filter='nothing'"> 色の反転</span> |
マスクをかける |
<span style="POSITION:absolute;" onmouseover="this.style.filter='Mask(Color=#000000)'" onmouseout="this.style.filter='nothing'"> マスクをかける</span></font></p> |