インターネット&PC120%活用:インターネット活用編


タグだけで作る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>
   

 

TopPage

 

inserted by FC2 system