如何让你的Space有两个自定义HTML模块

这个unsupported Custom HTML Module从发布到现在已快一个月了。从一开始大家就抱怨微软还是放不开，只允许添加一个自定义模块，而且还有512字节的限制。这大大限制了我们的创造力。昨晚突发奇想，能不能再继续添加自定义模块？经过长时间多次试验，我已成功再添加了一个自定义模块，可是不能再多。待会儿会说如果再添加会出现的情况。要添加第二个Custom HTML Module：

No.1

你必须要有一个Custom HTML Module。至于如何初始添加此模块，网上各位高手都已经有了很详细傻瓜的教程，我前面的一篇日志也有介绍，这里就不多说了。

No.2

转到编辑界面，点击自定义——>单击此处使用键盘操作的方式来自定义页面——>主提旁边的自定义。这时查看源文件，在里面找到下面这一句

 type='checkbox' title='This is an unsupported module supplied for the purpose of evaluation.' id='CustomHTML' name='PowerToy: Custom HTML' value='CustomHTML' checked><label for='pCustomHTML'>PowerToy: Custom HTML</label>&nbsp;<br></div><div class=Part><input onclick='selectPartType(this);'

好了，将之复制一遍，然后粘贴在这句话最后的那个单引号后面。注意，复制后请检查，单引号与之后面一个type之间有一个空格，正如原来这句开头的type与之前面的单引号之间也有空格一样。然后请找到刚才粘贴上去的那句话里的value='CustomHTML' checked，把这里的checked与之前面的空格去掉。

一切完成后，点击菜单栏另存为一个扩展名为htm文件。具体操作：在保存输入文件名时，保存类型选择所有文件，文件名随便输，只要扩展名为htm或html就可以了。保存的路径一定要记住哦！

No.3

打开刚保存的文件。我用的是xpsp2+IE7，在打开时会有风险提示，你要再点击一下提示以显示可能有风险的内容（软件商都爱故弄玄虚）。看！怎么样？在下面的模块栏里多了一个PowerToy: Custom HTML了吧？把它前面的框钩上，然后点最下面的保存。注意，在做No.3的时候，No.2里打开的那个窗口不能关闭，就是原始的那个调整自定义的窗口。如果关掉了的话，将无法保存所作的更改，点击保存后微软将会要你重新登陆。（真是紧啊！）

No.4

在网页的最下面多出了一个Custom HTML Module吧？好了，在里面粘贴你事先准备好的代码吧。点击完保存后，如果里面没有出现你先要的代码，还是原来的话，就试试另一个模块，总有一个是可以的，这里Mr Yang有点记不清楚了。最后，再把它拖到你想要的位置。怎么样？可以了吧？再预览一下，是不是有两块不同的自定义模块了呢？兴奋了吧？Job done!

教程收集整理： M1

[Q] 界面设计模块实现功能
界面设计模块允许用户使用一个自定义模块,在该模块之内用户可以随意调整整个Spaces的文字颜色 背景色等等一系列属性 个性十足 今天你Spaces了吗 这才是真正的自定义!


[Q] 如何添加界面设计模块
使用该模块的前提是IE6或更高版本, 该模块不支持中文版本. 所有选项包括提示只显示英文.

[Steps]
1. 登陆您的MSN Spaces, 点击自定义[Customize]
2. 在浏览器地址栏[Address bar]的URL后面添加参数 &powertoy=tweakomatic 按Enter或点击转到[Go]

3. 点击自定义[Customize]->模块[Modules]
4. 在下拉列表中找到PowerToy: Tweak UI项, 选择添加[Add]

5. 选择保存[Save]按钮

[Q] 如何使用该模块
该模块共有5大部分
1. 背景色[Background Color] 包括内部[Inner] 和 外部[Outer]

     A. 内部[Inner] Spaces内部各模块空隙处的背景颜色 3个两位十六进制正整数 00-FF 如:00CCFF
     B. 外部[Outer] Spaces右边空白处的背景颜色[大背景色] 3个两位十六进制正整数 00-FF 如:00CCFF

2. 背景图片[Background Image] 包括位置[Position] , 重复[Repeat] 和显示[Display] 依据各个主题[Theme]的不同 有些是有背景而有些是没有背景图片的 对于有背景图片的 我们可以:

     A. 位置[Position] Spaces背景图片的位置, 依次为默认[Default], 左上[Top Left], 中上[Top Center], 右上[Top Right], 左中[Center Left], 中中[Center Center], 右中[Center Right], 左下[Bottom Left], 中下[Bottom Center], 右下[Bottom Right] 这个不需要细讲了吧 崩溃了
     B. 重复[Repeat] Spaces背景图片重复的方式 不明白? 就是Windows桌面墙纸不是经常有中央,平铺以及拉伸什么的嘛, 就是差不多那个意思. 这里依次有默认[Default], 重复[Repeat], 不重复[No Repeat], 纵[Y]向重复[Repeat-Y], 横[X]向重复[Repeat-X]. 如果你背景是大图片, 就不要重复了, 小图片重阿重的才有效果 总体来说 可能我翻译不恰当 重复你就当成平铺好了 这样更好理解
    C. 显示[Display] 是否显示背景图片 默认[Default]是显示的, 隐藏[Hide]则不显示

3. 文字颜色[Font Color] 包括链接/链接图标[Links/Bullets] 和 文字[Text]

     A. 链接/链接图标[Links/Bullets]  所有超链接以及链接符号的颜色 3个两位十六进制正整数 00-FF 如:00CCFF
     B. 文字[Text] 所有非链接普通文本的颜色 3个两位十六进制正整数 00-FF 如:00CCFF

4. 模块背景[Module Background] 包括颜色[Color] 和 透明度[Transparent]

     A. 颜色[Color]  各个模块的背景颜色 3个两位十六进制正整数 00-FF 如:00CCFF
     B. 透明度[Transparent] 各个模块背景的透明度设置 20-100的整数值 分别为 20%-100%不透明 使用这个对整体视觉冲击比较大

5. 模块边框[Module Borders] 包括宽度[Width], 风格[Style] 和 颜色[Color]

     A. 宽度[Width]  各个模块边框的宽度 0-9 建议值为0或1 2以上就不要弄拉 大哥大姐 弄那么粗的边框真的很难看啊 不信弄个9试试? 嘿 还试试就试试? 郁闷
     B. 风格[Style] 各个模块边框的风格设置  用过.Net开发Web或者网页经常用的就知道有什么区别 当然 大家多试几次都能看出来 依次有默认[Default]-默认, 无[None]-不显示边框, [Dotted]-小点点, [Dashed]-小虚线, [Solid]-实线, [Double]-实线, [Groove]-凹按钮, [Ridge]凸按钮, [Inset], [Win-inset], [Outset]-没啥大的区别? 主要是用在这里不合适 不明显 不说了 郁闷
     B. 颜色[Color] 各个模块边框的颜色设置 3个两位十六进制正整数 00-FF 如:00CCFF

6. 保存[Save]按钮 回复[Revert]按钮-回到上次保存状态 不作保存

[Q] 使用该模块还有什么其他问题?
1. 该模块使用应当具备一定的视觉素养 否则任意修改都将造成超级大花脸的诞生 切记!
2. 该模块建议查询颜色代码值[如: 99FFDD] 不支持Red/rgb(205,10,36)等颜色单位
3. 怎么这么难看阿 救命啊 救命? 请参考问题一 哈哈 吓你的阿 将所有选项留空 按保存 他就又回到默认设置了阿
4.  一旦在自定义中去掉了PowerToy: Tweak UI项目 所有将回归原位...

Have you seen the blog entry above or here?That's an untitled blog.How do i make it? Read the article below.

Read This Blog In English    使用中文阅读

• 照片框產生之後可以用[複製起點→●] 和 [●←複製終點] 複製貼到你的網誌
• 多多使用  Ctrl+A (全選)  Ctrl+C (複製)  Ctrl+V (貼上)  Ctrl+X (剪下)  Ctrl+Z (復原)  組合鍵.....
• 想要對本篇進行研究，請務必熟析HTML語法。

1. 拍立得樣式精緻照片框  ~ ☺
2. 圖片加上照片框 ~ ☺
3. 圖片加上照片框(+PNG陰影) ~ ☺
4. 圖片加上照片框(+濾鏡陰影) ~ ☺
5. 圖片加上照片框(+陰影照片框) ~ ☺
6. 圖片加上照片框(+立體陰影) ~ ☺
7. 圖片加上自訂照片框(圖片重疊法)
8. 圖片加上自訂照片框(兩次框線法)
9. 使用線上工具加上照片框

width:Apx; 是整個相片框的寬度
width="Bpx" 是你想設定的圖寬

根據原作著的語法設定：
width:Apx; 為width="Bpx"圖片的寬度加20即(A=B+20)
然後加入圖片網址及照片描述/日期/名稱後即可!

其他的(Style Sheet)CSS 參數設定的詳細情形，可以參考原著，或參考DIV表格語法教學....

修改原理：

使用內層DIV框線白色實線框代替Padding(外框與內容的距離)

範例：

HTML:

在MSN Spaces上顯示的結果:(Firefox也行喔)

複製起點→●

Taipei 101
2005/01/01
Photo by Gene

●←複製終點

如果想要讓相框置右變成"文繞相框"的形式，

1.請在語法最前面加上<div style="float:right">

2.在語法最後面加上</div>

也就是多一個DIV把它們包起來，文字則要擺在</div>之後，才有"文繞相框"的效果出現。
置左就是把right改為left....應該了解...
　

2.圖片加上照片框:

HTML語法：

width="Cpx" 是你想設定的圖寬
height="Dpx" 是你想設定的圖高

然後加入圖片網址後即可!!

範例：

HTML:

在MSN Spaces上顯示的結果:(Firefox也行喔,但要設定絕對寬高)

複製起點→●

●←複製終點

3.圖片加上照片框(+PNG陰影)：

一些人常常使用PhotoShop等軟體為相片製作陰影效果，現在當沒有其他繪圖工具輔助的時候也可以模擬此效果喔。

在國外網站有人為此想出辦法　[連結一]　[連結二]　[連結三]

簡單說就是使用CSS和一些陰影圖片來模擬

引用網站其中一張原理圖

就是把一張陰影圖放在圖片的下面去做重疊....

但也是很可惜，這裡面所介紹的語法也不適用在MSN Spaces

所以只能修改語法，來得到最為相近的效果。

修改之後的HTML語法：

width:Apx; 是整個相片框的寬度(有2個) A=C+16
height:Bpx; 是整個相片框的高度            B=D+10

width="Cpx" 是你想設定的圖寬
height="Dpx" 是你想設定的圖高

height="Epx" 是右邊陰影的高度          E=C+10
width="Fpx" 是底部陰影的寬度          F=D+9

然後加入圖片網址後即可!!

會有那麼多的設定，主因是MSN Spaces不開放一些CSS所致。
所以把原網址

範例：

HTML:

在MSN Spaces上顯示的結果:(Firefox也行喔)

複製起點→●

●←複製終點

原圖:

4.圖片加上照片框(+濾鏡陰影) :  稍微較差的陰影效果

HTML語法：

width:Apx; 是整個相片框的寬度 A=C+15
height:Bpx; 是整個相片框的高度 B=D+15

width="Cpx" 是你想設定的圖寬
height="Dpx" 是你想設定的圖高

然後加入圖片網址後即可!!

當然使用濾鏡的話目前是不適用在Firefox的..

範例：

HTML:

在MSN Spaces上顯示的結果:

複製起點→●

●←複製終點

5.圖片加上照片框陰影(+陰影照片框) : 

逛逛 Royboy Weblog 又看到 [這一篇]，有提到使用背景圖的方式來與模擬陰影 (原作著是cassidy)

本來是使用圖片套用背景圖的樣式(讓圖重疊)....如下....但是MSN Spaces就是不支援正統的背景圖

所以沒辦法直接使用此語法。

<img src="照片框圖片" style="background:url(主要照片) no-repeat">

當然要套用此法....就得使用 MSN Spaces 加上背景圖的特殊語法　去做模擬。

故.....Firefox 不支援.....

那把 照片框圖片(中間當然要透明的喔) 畫成這樣就能模擬陰影圖片哩(多虧Royboy想出來)

修改後HTML語法：

width="Cpx" 是你想設定的圖寬
height="Dpx" 是你想設定的圖高

然後加入圖片網址後即可!!

範例：

HTML:

在MSN Spaces上顯示的結果:

複製起點→●

●←複製終點

6.圖片加上照片框(+立體陰影)：

在Fotki網站看到很不錯的樣式(照片四周加上陰影)，原語法也不適用在MSN Spaces

所以來修改修改語法。

修改之後的HTML語法：

width:A; 是整個相片框的寬度 A=C+27
height:B; 是整個相片框的高度 B=D+28

width="C" 是你想設定的圖寬
height="D" 是你想設定的圖高

然後加入圖片網址後即可!!

範例：

HTML:

在MSN Spaces上顯示的結果:(Firefox也行喔)

複製起點→●

●←複製終點

1. 到目前為止僅適用Microsoft Internet Explorer 上而已。
2. 因為MSN Spaces擋掉了background-image: url() 的通用背景樣式設定...
3. 是無意間測試發現的.....^^"
4. 最下面有 Step by Step 教學 。 (4/19修改)
5. 使用半透明背景主題的人士，加上濾鏡會與MSN Spaces的濾鏡發生衝突，效果大減。

要如何模擬成有背景圖片呢？

HTML語法：(紅色為關鍵部份，不可去掉) 

本文寬與本文高設定成 100% 就能延展擴大至整個網誌內容....像本篇背景

＊1.只要設定背景圖片位址和寬高(純網誌背景圖而已)(background-color: TRANSPARENT;已省略)

<div style="WIDTH: 100%;">
<img height="圖高" src="背景圖片" width="圖寬" align="right">
<div style="float:left;WIDTH: 100%; ">
內容
</div>
</div>
　

＊.最簡單背景之設法(純網誌背景圖而已)(連圖寬都不用設) <- 4/17

<img src="背景圖片" align="right">
<div style="float:left;WIDTH: 100%;">
內容
</div>
　

＊2.可自行設定本文寬、本文高(需使用絕對大小如px)，也可自行加線框，配合★圖層框框製作附加捲軸變化 教學，會有豐富效果。

HTML部分(background-color: TRANSPARENT;已省略)

<div style="WIDTH: 本文寬; HEIGHT: 本文高;">
<img height="圖高" src="圖片位址" width="圖寬" align="right">
<div style=" WIDTH: 本文寬; HEIGHT: 本文高;">
內容
</div>
</div>
　

範例：

HTML：

<div style="WIDTH: 109px; HEIGHT: 108px;">
<img height="108px" src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" width="109" align="right">
<div style="float:left; background-color: TRANSPARENT;WIDTH: 109px; HEIGHT: 108px; ">
<br>
<font color="#FF00FF">內容
<br>
<br>
圖片在文字下方</font>
</div>
</div>

結果：
　

內容

圖片在文字下方

$進階用法：

◊在前景部份(上方部份)可以換成圖片濾鏡

範例 1(文字變透明)：

HTML：

把【background-color:TRANSPARENT;】
換成其中一種濾鏡【filter:alpha(opacity=35,finishOpacity=35,style=0);】

<DIV style="WIDTH: 109px; HEIGHT: 108px"><IMG height=108 src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" width=109 align=right>
<DIV style="FLOAT: left; WIDTH: 109px; HEIGHT: 108px; filter:alpha(opacity=50, finishOpacity=50,style=0)"><BR>
<b><FONT color=#ff00ff>內容 <BR><BR>圖片在文字下方</FONT></b></DIV></DIV>

　

結果：【文字也變透明了】
　

內容

圖片在文字下方

範例 2(圖片也重疊了)：

HTML：【再把內容換成圖片】

<DIV style="WIDTH: 109px; HEIGHT: 108px"><IMG height=108 src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" width=109 align=right>
<DIV style="FLOAT: left; WIDTH: 109px; HEIGHT: 108px; filter:alpha(opacity=50, finishOpacity=50,style=0)">
<IMG height=108 src="http://storage.msn.com/x1plMlLh5OuvLUJCkwU76rRa6brGDcBU02OcTTQi4o59hUqkhhrPM7IRjO0QKmfhyvBdGeOTA3KwnrqmMuW1B3tMkW6TSUM-MlhBX7DCiDOt3aQnWkFSBDpug" width=109></DIV></DIV>
　

結果：【圖片也變透明了】

◊在背景部份(下方部份)也可以多加圖片濾鏡

範例：

HTML：背景圖多加圓形濾鏡

<div style="WIDTH: 109px; HEIGHT: 108px;">
<img height="108px" src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" style="FILTER: alpha(opacity=100, finishOpacity=0,style=2)" width="109" align="right">
<div style="float:left; background-color: TRANSPARENT;WIDTH: 109px; HEIGHT: 108px; ">
<br>
<font color="#FF00FF">內容
<br>
<br>
圖片在文字下方</font>
</div>
</div>

結果：

內容

圖片在文字下方

＊因為只有一種方法可以實現背景圖，那就是把本文浮動置左，圖案浮動置右。所以也造成圖片永遠在右邊的問題。

這裡提供一個解決辦法，可以讓圖片 【永遠置左】

提供一個透明圖片位址: http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_7_0?1113334951.gif

這裡提供一個解決辦法，可以讓圖片"強制" 【永遠置中】

嘿嘿....那就是多包一層<DIV align=center>拉...相對的要填好本文寬度

HTML語法 :

Step by Step 教學：

1. 請先輸入好你的網誌內容。
     
   　
2. 打開記事本複製以下內容 
   
   置左及置右人士：
   <div style="WIDTH: 100%; ">
   <img src="透明圖片" width=100% align="right"><img height="圖高" src="背景圖片" width="圖寬" align="right">
   <div style="float:left; WIDTH: 100%; ">
   內容
   </div>
   </div>
   　

   置中人士：

    
   
   <div align=center>
   <div style="WIDTH: 本文寬; ">
   <img src="背景圖片" width="100%" align="right">
   <div style="float:left; WIDTH: 100%; ">
   內容
   </div></div></div>
   　

①原图：                 

②柔边效果——均匀：

③柔边效果——线状（左往右）：

④柔边效果——圆形（外往中央）：

⑤柔边效果——长方形（中央往外）：

⑥诙谐效果：

⑦X光效果：

⑧色彩对换：

⑨左右翻转：

⑩上下翻转：

⑪发光效果：

⑫附阴影效果：

 

⑬投射阴影效果：

 

 

⑭波形效果：

 

⑮模糊效果：

滤镜：它只是一种CSS里可用的滤镜样式(Style Sheet)而已。

HTML叙述：

无属性：<标签名称>内容</标签名称>

单属性：<标签名称  属性名称＝“值”>内容</标签名称>

多属性：<标签名称  属性名称1＝“值”  属性名称2＝“值”>内容</标签名称>

（依次类推）

*重要的是：内容要被标签名称所包夹

*标签名称及属性名称和值，英文大小写无差别

*要设定多个属性时，必须以空格来表示间隔

标签名称如：

a       ->超链接  img    ->图片  u       ->底线  i        ->斜体
font   ->字型    b        ->粗体 p        ->段落 div     ->段落
br      ->断行

例如：

<IMG SRC="sample.gif"></IMG> -------->显示图片</IMG>可省略
<A HREF="网址">內容</A> ------->設定內容超链接位置</A>不能省略
如果不知道</标签名称>是否要省略，那就加上去吧，不会有错的。

Style Sheet叙述：

<标签名称  style="样式名称:值">内容</标签名称>

各种滤镜样式的详细描述情形：

滤镜的样式名称为“filter”，所以

套用在图片上为：<IMG Style="filter:值">

套用在DIV上为：<DIV  Style="filter:值;with:滤镜宽;with:滤镜高"><IMG></DIV>

为何使用DIV：因为上下边界无空白，可以替代IMG，且某些滤镜只能使用在DIV，多种效果要靠它，但使用DIV时必须设定宽度和高度。

*要设定多个参数时，必须以半角的逗号“,”来间隔

*图宽和图高只要在图片上按右键，内容可以得知

A.半透明合成：

lordzhu代码：

<img src="图片" style="filter:Alpha(■)">
或
<div style="filter:Alpha(■) ;width:图宽;height:图高"><img src="图片"></div>

■参数：

opacity             -->设定起始处的透明度
finishOpacity     -->设定結束处的透明度
style                -->0:均勻、1:线状、2:圆形、3:长方形

图③效果代码：

<img src="http://pic.ourplus.com/yourpic/2005/05/08/20/877c3a5a80d936977848824963e1e919.jpg" style="filter: alpha(opacity=0, finishOpacity=100,style=1)">

或：

<div style="height=206;width=290;filter: alpha(opacity=0, finishOpacity=100,style=1)" ><img src="http://pic.ourplus.com/yourpic/2005/05/08/20/877c3a5a80d936977848824963e1e919.jpg" ></div>

B.诙谐、Ｘ光效果、色彩对换(互补色)：

HTML代码：

诙谐:
<img src="图片" style="filter:Gray">
或
<div style="filter:Gray ;width:图宽;height:图高"><img src="图片"></div>

Ｘ光效果:
<img src="图片" style="filter:Xray">
或
<div style="filter:Xray ;width:图宽;height:图高"><img src="图片"></div>

色彩对换:
<img src="图片" style="filter:Invert">
或
<div style="filter:Invert ;width:图宽;height:图高"><img src="图片"></div>

■参数：无

图⑥效果代码：

<IMG src="http://pic.ourplus.com/yourpic/2005/05/08/20/877c3a5a80d936977848824963e1e919.jpg"style="FILTER: gray; WIDTH: 290px; HEIGHT: 206px">

或：

<div style="width:290px;height:206px;filter:Gray">
<img src="http://pic.ourplus.com/yourpic/2005/05/08/20/877c3a5a80d936977848824963e1e919.jpg"></div>

图⑦效果代码：

<IMG src="http://pic.ourplus.com/yourpic/2005/05/08/20/877c3a5a80d936977848824963e1e919.jpg"style="FILTER: Xray; WIDTH: 290px; HEIGHT: 206px">

或：

<div style="width:290px;height:206px;filter:Xray">
<img src="http://pic.ourplus.com/yourpic/2005/05/08/20/877c3a5a80d936977848824963e1e919.jpg"></div>

图⑧效果代码：

<IMG src="http://pic.ourplus.com/yourpic/2005/05/08/20/877c3a5a80d936977848824963e1e919.jpg"style="FILTER: invert; WIDTH: 290px; HEIGHT: 206px">

或：

<div style="width:290px;height:206px;filter:Invert">
<img src="http://pic.ourplus.com/yourpic/2005/05/08/20/877c3a5a80d936977848824963e1e919.jpg"></div>

C.翻转：

HTML代码：

左右翻转:
<img src="图片" style="filter:FlipH">
或
<div style="filter:FlipH ;width:图宽;height:图高"><img src="图片"></div>

上下翻转:
<img src="图片" style="filter:FlipV">
或
<div style="filter:FlipV ;width:图宽;height:图高"><img src="图片"></div>

■参数：无

图⑨效果代码：

<IMG style="FILTER: FlipH; WIDTH: 290px; HEIGHT: 206px" height=206 src="http://pic.ourplus.com/yourpic/2005/05/08/20/877c3a5a80d936977848824963e1e919.jpg" width=290>

<div style="width:290px;height:206px;filter:FlipH">
<img src="http://pic.ourplus.com/yourpic/2005/05/08/20/877c3a5a80d936977848824963e1e919.jpg"></div>

D.發光效果：

HTML代码：

<div style="filter:Glow(■);width:滤镜宽;height:滤镜高" align=center><br><img src="图片"></div>

■参数：

color              -->发光颜色
strength        -->发光强度
滤镜宽=图宽+发光强度x2
滤镜高=图高+发光强度x2+10

图⑪效果代码：

<DIV align=left>
<DIV style="FILTER: Glow(color=#4A7AC9,strength=12); WIDTH: 305px; HEIGHT: 227px" align=left>
<DIV align=left><BR></DIV>
<P align=center><IMG style="WIDTH: 272px; HEIGHT: 198px" height=470 src="http://pic.ourplus.com/yourpic/2005/05/08/20/877c3a5a80d936977848824963e1e919.jpg" width=272 align=center></P></DIV></DIV>

E.投射阴影效果：

lordzhu代码：

<div style="filter:Shadow(■);width:滤镜宽;height:滤镜高" align=center><br><img src="图片"></div>

■参数：

color             -->发光颜色
direction       -->方向(45角度单位)(0、45、90、135、180、225、270、315)
滤镜宽=略大于图宽(建议:图宽+24)
滤镜高=略大于图高(建议:图高+24+10)

图⑬效果代码：

<DIV align=left>&nbsp;</DIV>
<DIV align=left>
<DIV style="FILTER: Shadow(color=#4A7AC9,direction=135); WIDTH: 309px; HEIGHT: 241px" align=left><BR><IMG style="WIDTH: 300px; HEIGHT: 218px" height=586 src="http://pic.ourplus.com/yourpic/2005/05/08/20/877c3a5a80d936977848824963e1e919.jpg" width=306></DIV></DIV>
<DIV align=left>&nbsp;</DIV>

F.附阴影效果：

HTML代码：

<div style="filter:Dropshadow(■);width:滤镜宽;height:滤镜高" align=center><br><img src="图片"></div>

■参数：

color             -->发光颜色
offX              -->水平位移(可正负)
offY              -->垂直位移(可正负)
滤镜宽=图宽+水平位移绝对值+10
滤镜高=图高+垂直位移绝对值+10+10

图⑫效果代码：

<DIV align=left>
<DIV style="FILTER: Dropshadow(color=#4a7ac9,offX=5,offY=5); WIDTH: 295px; HEIGHT: 218px" align=left><IMG style="WIDTH: 290px; HEIGHT: 202px" height=578 src="http://pic.ourplus.com/yourpic/2005/05/08/20/877c3a5a80d936977848824963e1e919.jpg" width=376><BR></DIV></DIV>
<DIV align=left>&nbsp;</DIV>

G.模糊效果：

HTML代码：

<div style="filter:Blur(■);width:滤镜宽;height:滤镜高" align=center><br><img src="图片"></div>

■参数：

direction        -->方向(45角度单位)(0、45、90、135、180、225、270、315)
滤镜宽=略大于图宽(建议:图宽+15)
滤镜高=略大于图高(建议:图高+15+10)

图⑮效果代码：

<DIV style="FILTER: Blur(direction=135); WIDTH: 315px; HEIGHT: 209px" align=center><BR><IMG style="WIDTH: 292px; HEIGHT: 189px" height=281 src="http://pic.ourplus.com/yourpic/2005/05/08/20/877c3a5a80d936977848824963e1e919.jpg" width=244 align=left></DIV>
<P>&nbsp;</P>

H.波形效果：

HTML代码：

<div style="filter:Wave(■);width:滤镜宽;height:滤镜高" align=center><br><img src="图片"></div>

■参数：

freq                -->频率(0+)
strength         -->振幅强度(0+)
lightstrength  -->波峰强度(0~100)越高越黑
phase             -->起始相位(0~100)
滤镜宽=图宽+振幅强度x2
滤镜高=图高+振幅强度x2+10

图⑭效果代码：

<DIV align=left>&nbsp;</DIV>
<DIV align=left>
<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 329px; HEIGHT: 191px" align=center><BR>
<P align=center><IMG style="WIDTH: 290px; HEIGHT: 171px" height=562 src="http://pic.ourplus.com/yourpic/2005/05/08/20/877c3a5a80d936977848824963e1e919.jpg" width=198 align=center></P></DIV></DIV>

多重效果范例：

HTML代码：（波形加上半透明合成）

<DIV style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 145px; HEIGHT: 103px" align=center><BR><IMG style="FILTER: Alpha(opacity=100,finishOpacity=0,style=2); WIDTH: 304px; HEIGHT: 188px" height=452 src="http://pic.ourplus.com/yourpic/2005/05/08/20/877c3a5a80d936977848824963e1e919.jpg" width=300></DIV>