培迪 的痞客邦部落格

插入圖檔語法：

<img src="圖片網址">

範例：<img src="http://webp1.fsps.ntpc.edu.tw/~happy/1/2.gif">

適用於：各部落格文章中、自訂欄位中 、網頁編輯中、  論壇文章..

底圖 logo 語法：

<font color="#色碼" style=background:url(底圖logo網址)>字串</font>

範例：

<font color="#EE0005" style=background:url(http://webp1.fsps.ntpc.edu.tw/~happy/1/1-2.gif)>314學習札記</font>

314學習札記

<font face="標楷體"><b><font color="#EE0005" style=background:url(http://webp1.fsps.ntpc.edu.tw/~happy/1/1-2.gif)>314學習札記</font></b></font>

延伸教學：

logo文字語法：

http://tw.myblog.yahoo.com/monkey_014148/article?mid=3923&next=3286&l=f&fid=31

色碼表：http://sunny666.myweb.hinet.net/B4.htm

圖檔 放大語法 ：

(自訂 尺寸--HEIGHT(高)=??? WIDTH(寬)=???)

<IMG SRC="圖擋 網址" ALGIN=MIDDLE HEIGHT=??? WIDTH=???> 

範例：

  原始圖檔60x30

<IMG SRC="http://webp1.fsps.ntpc.edu.tw/~happy/1/1-2.gif" ALGIN=MIDDLE HEIGHT=90 WIDTH=180> 

放大後：

注意：圖片過於放大會失真

圖檔置中語法：

範例網：http://sunny666.myweb.hinet.net/10-1.htm

圖片位置 語法：

<p align=center><img src="圖檔網址"></p>

說明：

center=圖片居中；left=圖片靠左；right=圖片靠右

奇摩不支援範例

範例網 觀看：http://blog.yam.com/sunny666/article/48355735

鎖 圖 語 法

<IMG SRC="圖片網址" onmousedown="alert('打你想出現的字！')">

(按圖 會呈現特效)

奇摩不支援範例

範例網 觀看：http://blog.yam.com/sunny666/article/48355735

圖片透明化 語法：

<img src="圖檔網址" style="filter:Alpha(Style=n)">

說明：

n=1~3

n值越大越透明，最大為3，建議用2

範例：

圖片加框 語法：

<img src="圖檔網址" border=?> 

說明：

border= 框線大小

範例：

圖片加框色 語法：

<img src="圖檔網址.gif" style="border: 3px solid #FF0000">

說明：

style="border: 3p → 框線大小

solid #FF0000" →顏色

範例：

延伸教學：

色碼表：http://sunny666.myweb.hinet.net/B4.htm

圖片+點框 語法：

<img src="圖檔網址.gif" style="border: 2px dotted #0000FF">

說明：

style="border: 2px→ 點框大小

dotted #0000FF →點框顏色

範例：

圖片跑馬燈移動： 

往左：<marquee behavior=side direction=left><img src="圖檔網址"></marquee> 

往右：<marquee behavior=side direction=right><img src="圖檔網址"></marquee> 

奇摩不支援範例

範例觀看：http://blog.xuite.net/sunny.s4039/orz888/58728725

扭曲變形的圖 語法
<IMG SRC="圖片網址"style="Filter:Wave(strength=9,freq=,
lightstrength=23,phase=80)"

奇摩不支援範例

範例網觀看：http://blog.xuite.net/sunny.s4039/orz888/58728851

圖片碰觸變色 語法

圖片時變黑白  語法：
<IMG border="0" src="圖片網址"onMouseOver="this.style.filter='gray'
"onMouseOut="this.style.filter=null">

圖片時變黑  語法：
<IMG border="0" src="圖片網址"onMouseOver="this.style.filter='xray'
"onMouseOut="this.style.filter=null">

圖片時變底片圖  語法：
<IMG border="0" src="圖片網址"onMouseOver="this.style.filter='invert'
"onMouseOut="this.style.filter=null">

觸 碰 淡 化影像 語法：

<img SRC="圖片網址" onmouseout="this.filters.alpha.opacity=100"
onmouseover="this.filters.alpha.opacity=50"
style="filter:alpha(opacity=100)">

灰 階 影 像  語法：

<IMG SRC="圖片網址" STYLE="FILTER: Gray(Color=blue)">

負片 影像效果 語法：

<IMG SRC="圖片網址" STYLE="FILTER: Invert(Color=blue)">

透 明 遮 罩影像語法：

<IMG SRC="圖片網址" STYLE="FILTER: Mask(Color=blue)">

隱 約 美 化影像 語法：

<img src="圖片網址"style="filter:wave(strength=0,freq=3,phase=8,lightstrength=10) Alpha(Opacity=100, style=2)">
奇摩不支援範例

範例網 觀看：

http://blog.yam.com/sunny666/article/48355735

http://blog.xuite.net/sunny.s4039/orz888/58729041