ロールオーバーのテクニック

モノクロ
カラー→モノクロ

<img src="画像アドレス" onmouseover="this.style.filter='gray'" onmouseout="this.style.filter=''" alt="コメント">
filterのところにgray、invert、xray指定できます


カラー
モノクロ→カラー

<img src="画像アドレス" style="filter:gray" onmouseover="this.style.filter=''" onmouseout="this.style.filter='gray'" alt="コメント">
filterのところにgray、invert、xray指定できます


ネガポジ
カラー→ネガポジ

<img src="画像アドレス" onmouseover="this.style.filter='invert'" onmouseout="this.style.filter=''" alt="コメント">
filterのところにgray、invert、xray指定できます


カラー
ネガポジ→カラー

<img src="画像アドレス" style="filter:invert" onmouseover="this.style.filter=''" onmouseout="this.style.filter='invert'" alt="コメント">
filterのところにgray、invert、xray指定できます


レントゲン
カラー→レントゲン

<img　src="画像アドレス" onmouseover="this.style.filter='xray'" onmouseout="this.style.filter=''" alt="コメント">
filterのところにgray、invert、xray指定できます


カラー
レントゲン→カラー

<img src="画像アドレス" style="filter:xray" onmouseover="this.style.filter=''" onmouseout="this.style.filter='xray'" alt="コメント">
filterのところにgray、invert、xray指定できます


透明
カラー元画像→透明

<img src="画像アドレス" onmouseover="this.style.filter='Alpha(opacity=数値が小さいほど透明)'" onmouseout="this.style.filter=''" alt="コメント">


カラー
透明→カラー元画像

<img src="画像アドレス" style="filter:Alpha(opacity=数値が小さいほど透明)" onmouseover="this.style.filter=''" onmouseout="this.style.filter='Alpha(opacity=数値が小さいほど透明)'" alt="コメント">


カラー画像→グラデーション

<img src="画像アドレス" onmouseover="this.style.filter='alpha(style=1,opacity=100,finishopacity=0)'" onmouseout="this.style.filter=''" alt="コメント">
style=1が片面　style=2が円形　style=3が四角形を指定できます


説明
カラー元画像→モザイク

<img src="画像アドレス" onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Pixelate(maxsquare=モザイクにする数値)'" onmouseout="this.style.filter=''" alt="コメント">


元画像
モザイク→カラー元画像

<img src="画像アドレス" style="filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=モザイクにする数値);"
onmouseover="this.style.filter=''" onmouseout="this.style.filter='progid:DXImageTransform.Microsoft.Pixelate(maxsquare=モザイクにする数値)'" alt="コメント">


カラー元画像→エンボス（立体）

<img src="画像アドレス" onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Emboss'" onmouseout="this.style.filter=''" alt="コメント">


カラー元画像→エングローブ（立体）

<img src="画像アドレス" onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Engrave'" onmouseout="this.style.filter=''" alt="コメント">


カラー画像→ぼかす

<img src="画像アドレス"onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Blur'" onmouseout="this.style.filter=''" alt="コメント">


カラー画像→燃える

<img src="画像アドレス" onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.glow(color=色,strength=発光の強さ1〜255)'" onmouseout="this.style.filter=''" alt="コメント">
例、color=hotpinkまたは#FF0000　strength=10


カラー画像→なみのように(add=false上書きしない)

<img src="画像アドレス" onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.wave(add=false,strength=波の幅,
fleq=波の回数,lightstrength=影の濃さ,phase=角度)'" onmouseout="this.style.filter=''" alt="コメント">


カラー画像→なみのように(add=true上書きする)

<img src="画像アドレス" onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.wave(add=false,strength=波の幅,
fleq=波の回数,lightstrength=影の濃さ,phase=角度)'" onmouseout="this.style.filter=''" alt="コメント">


カラー画像→上下反転

<img src="画像アドレス" onmouseover="this.style.filter='flipv'" onmouseout="this.style.filter=''" alt="コメント">


カラー画像→左右反転

<img src="画像アドレス" onmouseover="this.style.filter='fliph'" onmouseout="this.style.filter=''" alt="コメント">


カラー画像→ぶれる(add=false上書きしない)

<img src="画像アドレス" onmouseover="this.style.filter='blur(add=false,strength=影の長さ,direction=影の角度時計回り)'" onmouseout="this.style.filter=''" alt="コメント">


カラー画像→ぶれる(add=true上書きする)

<img src="画像アドレス" onmouseover="this.style.filter='blur(add=true,strength=影の長さ,direction=影の角度時計回り)'" onmouseout="this.style.filter=''" alt="コメント">

ホーム