缺口的心

關於部落格
素材走廊
  • 288834

    累積人氣

  • 0

    今日人氣

    0

    訂閱人氣

圖片語法總匯

 

圖片語法總匯

貼圖語法製造機:

http://sunny666.myweb.hinet.net/1-7.htm

插入圖檔語法:

<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

放大後:

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

圖檔置中語法:
<style type=text/css>
<!--
body{
background-image:url(圖片網址);
background-position:50% 50%;
background-attachment:fixed;
background-repeat:no-repeat;}
-->
</style>

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

 

圖片位置 語法:

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

說明:

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

範例:

<p align=center><img src="http://webp1.fsps.ntpc.edu.tw/~happy/1/13.gif"></p>

 

<p align=left><img src="http://webp1.fsps.ntpc.edu.tw/~happy/1/13.gif"></p>

 

<p align=right><img src="http://webp1.fsps.ntpc.edu.tw/~happy/1/13.gif"></p>

 

 

鎖 圖 語 法

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

範例:(按↓憤怒猴子圖 會呈現特效)

 

圖片透明化 語法:

<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.xuite.net/sunny.s4039/orz888/58729041

特殊圖片語法(314舊文)

http://tw.myblog.yahoo.com/monkey_014148/article?mid=6724&next=6722&l=f&fid=9

 

相簿設定
標籤設定
相簿狀態