注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

火力光波的博客

火一般的热情 光一样的速度

 
 
 

日志

 
 

图帖制作方法及代码  

2008-08-25 08:42:35|  分类: 图片制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

一、贴图的基础代码

贴图制作方法及代码  - 火力光波 - 火力光波的博客

代码为:  <IMG src="http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg" width=350>

 

二、淡化边缘效果

贴图制作方法及代码  - 火力光波 - 火力光波的博客

代码为:  <IMG style="FILTER: Alpha(opacity=100,style=1)" src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg" width=350>

 

贴图制作方法及代码  - 火力光波 - 火力光波的博客

代码为:  <IMG style="FILTER: Alpha(opacity=100,style=2)" src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg" width=350>

  

贴图制作方法及代码  - 火力光波 - 火力光波的博客

代码为:  <IMG style="FILTER: Alpha(opacity=100,style=3)" src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg" width=350>

 

贴图制作方法及代码  - 火力光波 - 火力光波的博客

  代码为:  <IMG style="FILTER: Alpha(opacity=0,finishopacity=100,style=1)" src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg" width=350>

 

 

三、图片加框效果

贴图制作方法及代码  - 火力光波 - 火力光波的博客

 代码为: <img src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg" width=350 style="border:8px #987cb9 dotted">

或: <IMG style="BORDER-RIGHT: #987cb9 8px dotted; BORDER-TOP: #987cb9  8px dotted; BORDER-LEFT: #987cb9  8px dotted; BORDER-BOTTOM: #987cb9  8px dotted" src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg">

 

 

贴图制作方法及代码  - 火力光波 - 火力光波的博客

 代码为:   <img src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg" width=350 style="border:12px #987cb9 double">

  

贴图制作方法及代码  - 火力光波 - 火力光波的博客

 代码为:    <P align=center><img src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg" width=350 style="border:5px #987cb9 dashed">

  

贴图制作方法及代码  - 火力光波 - 火力光波的博客

代码为:  <img src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg" width=350 style="border:12px #987cb9 groove">

 
 
贴图制作方法及代码  - 火力光波 - 火力光波的博客

 代码为:   <DIV align=center>
<TABLE style="BORDER-RIGHT: #6a5acd 3px dashed; BORDER-TOP: #6a5acd 3px dashed; BORDER-LEFT: #6a5acd 3px dashed; BORDER-BOTTOM: #6a5acd 3px dashed" cellSpacing=5 cellPadding=0 align=center bgColor=#9400d3>
<TBODY>
<TR>
<TD align=middle width=350 bgColor=#6495ed><IMG src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg"></TD></TR></TBODY></TABLE></DIV>

 

 

 贴图制作方法及代码  - 火力光波 - 火力光波的博客

 代码为:    <img src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=10)">

 

 

四、图片移动效果

 

贴图制作方法及代码  - 火力光波 - 火力光波的博客

代码为:   <MARQUEE direction=right  scrollamount=10><IMG src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg"></MARQUEE>

说明:direction=right表示图片自左向右移动,direction=left表示自右向左移动,也可缺省.direction=up表示图片自下而上移动,direction=down表示自上往下移动

 

 

.

贴图制作方法及代码  - 火力光波 - 火力光波的博客

  代码为:   <marquee width=100% behavior=alternate scrollamount=10><img src=

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg width=350 ></marquee>

 

 

 

图帖制作方法及代码 - 火力光波 - 火力光波的博客

  代码为:    <marquee width=100% behavior=scroll scrollamount=10><img src=

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpgwidth=350 ></marquee>

 

 

 

贴图制作方法及代码  - 火力光波 - 火力光波的博客

代码为:   <marquee direction=left><marquee behavior=alternate direction=up height=500><img src=

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg> </marquee>

 

 

 

贴图制作方法及代码  - 火力光波 - 火力光波的博客 贴图制作方法及代码  - 火力光波 - 火力光波的博客

 代码为:   <marquee width=350 ><img src=

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg  width=350>  </marquee><marquee direction=right width=350 ><img src=

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg width=350>  </marquee>

 

 

 

贴图制作方法及代码  - 火力光波 - 火力光波的博客

 

 代码为:  <marquee direction=down scrollamount=3><center><div style="width:350;filter:flipv ; "><img src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg" width=350></div></center></marquee>

 

 

 

 

 

贴图制作方法及代码  - 火力光波 - 火力光波的博客

代码为:
<MARQUEE scrollAmount=3 direction=right behavior=alternate>
<MARQUEE direction=up behavior=alternate width=350 height=500>
<P align=center><IMG src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg"></P> </MARQUEE></MARQUEE>

 

 

 

贴图制作方法及代码  - 火力光波 - 火力光波的博客 贴图制作方法及代码  - 火力光波 - 火力光波的博客 贴图制作方法及代码  - 火力光波 - 火力光波的博客 贴图制作方法及代码  - 火力光波 - 火力光波的博客

代码为:   

<TABLE cellSpacing=0 cellPadding=0 width="50%" align=center border=0>
<TBODY>
<TR>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=175><IMG style="FILTER: fliph()" src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg" width=175></MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 width=175><IMG src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg

" width=175></MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=175><IMG style="FILTER: fliph()" src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg

" width=175></MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 width=175><IMG src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg

" width=175></MARQUEE></TD></TR></TBODY></TABLE>

 

 

 

贴图制作方法及代码  - 火力光波 - 火力光波的博客

代码为:   <MARQUEE direction=right  scrollamount=10><IMG style="FILTER: Alpha(opacity=100,style=2)" src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg"> </MARQUEE>

 或:  <MARQUEE direction=right  scrollamount=10 >
<TABLE style="FILTER: Alpha(opacity=100,style=2)"  width=350 height=263 background=

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg> </MARQUEE>

 

 


 

贴图制作方法及代码  - 火力光波 - 火力光波的博客

代码为:  <MARQUEE style="WIDTH: 1000px " scrollAmount=5 direction=right>
 <img src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg"  width=350  style="border:8px #987cb9 dotted"></MARQUEE>

 

 

五、图片的另外一些滤镜效果

图帖制作方法及代码 - 火力光波 - 火力光波的博客

贴图制作方法及代码  - 火力光波 - 火力光波的博客

代码为:   <IMG height=232 src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg" width=310><BR><IMG style="FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30)  blur() flipv()" height=232 src="http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg" width=310>

 

 

贴图制作方法及代码  - 火力光波 - 火力光波的博客

代码为:   <IMG style="FILTER: progid:DXImageTransform.Microsoft.Emboss()" src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg">

 

 

贴图制作方法及代码  - 火力光波 - 火力光波的博客

代码为:   <IMG style="FILTER: gray" src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg">

 

 

贴图制作方法及代码  - 火力光波 - 火力光波的博客

代码为:   <img src="

http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg" style="filter:invert">

 

 

六、用JavaScript实现的其它图片效果

 <DIV align=center><IMG style="FILTER: Wave(Freq=1,LightStrength=80,Phase=-11384)" height=263 src="http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg" width=350></DIV>

效果:

贴图制作方法及代码  - 火力光波 - 火力光波的博客

 

 

<DIV align=center>
<MARQUEE width=250 height=250><IMG src="http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"><IMG src="http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"></MARQUEE>
<MARQUEE direction=right width=250 height=250><IMG src="http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"><IMG src="http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"></MARQUEE></DIV>

 

效果:

贴图制作方法及代码  - 火力光波 - 火力光波的博客贴图制作方法及代码  - 火力光波 - 火力光波的博客 贴图制作方法及代码  - 火力光波 - 火力光波的博客贴图制作方法及代码  - 火力光波 - 火力光波的博客

 

 

 

<DIV align=center>
<MARQUEE direction=right width=250 height=250><IMG src="http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"><IMG src="http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"></MARQUEE>
<MARQUEE width=250 height=250><IMG src="http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"><IMG src="http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"></MARQUEE></DIV>

效果:

贴图制作方法及代码  - 火力光波 - 火力光波的博客贴图制作方法及代码  - 火力光波 - 火力光波的博客 贴图制作方法及代码  - 火力光波 - 火力光波的博客贴图制作方法及代码  - 火力光波 - 火力光波的博客
 
 
 
 

<DIV align=center>
<MARQUEE scrollAmount=2 direction=down>
<DIV align=center><BR><IMG src="http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"><BR><IMG src="http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"><BR><IMG src="http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"><BR><IMG src="http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"><BR><IMG src=" http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"></DIV></MARQUEE>
<MARQUEE style="FILTER: flipv(enabled=1)" scrollAmount=2 direction=down>
<DIV align=center><BR><IMG src="http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"><BR><IMG src="http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"><BR><IMG src="http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"><BR><IMG src=" http://img.blog.163.com/photo/xWpP7kLm5ZHJH1EUH1Hxmw==/2304998584284162185.jpg"></DIV></MARQUEE></DIV>

效果:


贴图制作方法及代码  - 火力光波 - 火力光波的博客
贴图制作方法及代码  - 火力光波 - 火力光波的博客
贴图制作方法及代码  - 火力光波 - 火力光波的博客
贴图制作方法及代码  - 火力光波 - 火力光波的博客
贴图制作方法及代码  - 火力光波 - 火力光波的博客

贴图制作方法及代码  - 火力光波 - 火力光波的博客
贴图制作方法及代码  - 火力光波 - 火力光波的博客
贴图制作方法及代码  - 火力光波 - 火力光波的博客
贴图制作方法及代码  - 火力光波 - 火力光波的博客
 

 


<CENTER><FONT style="FONT-SIZE: 30pt; FILTER: glow(color: violet,strength=50); WIDTH: 100%; COLOR: gainsboro; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷"><BR><MARQUEE direction=up behavior=alternate width=120 height=240><CENTER><B>姐</B></CENTER></MARQUEE><MARQUEE direction=up behavior=alternate width=120 height=180><CENTER><B>妹</B></CENTER></MARQUEE><MARQUEE direction=up behavior=alternate width=120 height=240><CENTER><B>情</B></CENTER></MARQUEE><MARQUEE direction=up behavior=alternate width=120 height=180><CENTER><B>缘</B></CENTER></MARQUEE><MARQUEE direction=up behavior=alternate width=120 height=240><CENTER><B>深</B></CENTER></MARQUEE><CENTER></CENTER><DIV></DIV>

效果:


 

<p><MARQUEE scrollAmount=1 scrollDelay=100 behavior=slide loop=1 width=600
height=350><BR><MARQUEE style="LINE-HEIGHT: 150%; WRITING-MODE: tb-rl" scrollAmount=1 scrollDelay=100 direction=up width=600 height=350><BR><DIV style="FILTER: glow(color=#E4DC9B, strength=5); WIDTH: 450px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 18pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#e31c1b><br>你知道吗爱你并不容易 <br>还需要很多勇气<br>是天意吧好多话说不出去<br>就是怕你负担不起<br>你相信吗这一生遇见你<br>是上辈子我欠你<br>是天意吧让我爱上你<br>才又让你离我而去<br>也许轮回里早已注定<br>今生就该我还给你<br>一颗心在风雨里
飘来飘去都是为你<br>一路上有你苦一点也愿意<br>就算是为了分离与我相遇<br>一路上有你痛一点也愿意<br>就算这辈子注定要和你分离<br>你知道吗爱你并不容易<br>还需要很多勇气<br>是天意吧好多话说不出去<br>就是怕你负担不起<br>你相信吗这一生遇见你<br>是上辈子我欠你<br>是天意吧让我爱上你<br>才又让你离我而去<br>也许轮回里早已注定<br>今生就该我还给你<br>一颗心在风雨里<br>飘来飘去都是为你<br>一路上有你苦一点也愿意<br>就算是为了分离与我相遇<br>一路上有你痛一点也愿意<br>就算这辈子注定要和你分离<br>一路上有你苦一点也愿意<br>就算是为了分离与我相遇<br>一路上有你痛一点也愿意<br>就算这辈子注定要和你分离<br>一路上有你苦一点也愿意<br>就算是为了分离与我相遇<br>一路上有你痛一点也愿意<br>就算是只能在梦里拥抱你<br><br></FONT></DIV></EMBED></EMBED></p>

效果:

vior=slide loop=1>

你知道吗爱你并不容易
还需要很多勇气
是天意吧好多话说不出去
就是怕你负担不起
你相信吗这一生遇见你
是上辈子我欠你
是天意吧让我爱上你
才又让你离我而去
也许轮回里早已注定
今生就该我还给你
一颗心在风雨里飘来飘去都是为你
一路上有你苦一点也愿意
就算是为了分离与我相遇
一路上有你痛一点也愿意
就算这辈子注定要和你

 

 

 

七、在贴图中怎样加入透明的flash 

例1.

代码如下:
<P>
<TABLE borderColor=#8C8C00 height=300 cellPadding=3 width=400 background=http://img.blog.163.com/photo/rp6_7rdB29lbpE-h1YXXhQ==/4016084967708487920.jpg border=5>
<TBODY>
<TR>
<TD width=0 colSpan=2 height=0 rowSpan=2><EMBED align=right src=

http://www.zxtx.org/user/yiyi/html/flash/051.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED><EMBED align=right src=http://vip.cn/client/fuyongjianpp/20061522930324.SWF width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED> </TD></TR></TBODY></TABLE></P><BR><BR><BR><BR>

红色是控制图片的宽度和宽度

绿色是图片地址

兰色是控制透明FLASH的高度和宽度(设置时候一般不要大于图片的高度和宽度)

橙色是透明FLASH的地址

发帖时,先点击HTML,把图片下面的代码和网址全部复制粘到对话框里,再点击Design,你就可以直观的看到效果。

以上有颜色的是可变的,可以灵活套用,其他的就不用动。

 

 

例2.图中有特效有文字


火力光波

欢迎光临

自己动手

亲自体会

火力光波制作

代码如下:

<TABLE borderColor=#8080C0 height=450 width=600 background=http://img2.3lian.com/img2007/4/17/20067311814887712.gif border=10>
<TBODY>
<TR>
<TD><EMBED align=right src=http://imgfree.21cn.com/free/flash/16.swf width=580 height=400 type=application/octet-stream quality="high" wmode="transparent"> <BR>
<P>
<P>
<P align=center>
<TABLE borderColorDark=#808000 width="90%" borderColorLight=#008000 border=0>
<TBODY>
<TR>
<TD width="100%">
<P align=center><FONT face=黑体 color=#0066CC size=6>火力光波
</FONT></P>
<P align=center><FONT face=黑体 color=#FF00FF size=6>欢迎光临</FONT></P>
<P align=center><FONT face=黑体 color=#00EC00 size=6>自己动手</FONT></P>
<P align=center><FONT face=黑体 color=#FF0000 size=6>亲自体会</FONT></P>
<P align=center><FONT face=黑体 color=#EA7500 size=5>火力光波制作<STRONG></STRONG></FONT></P><STRONG>
<P align=center></FONT>
<P>
<P>
<P>
<P>
<P><FONT face=黑体_GB2312 color=#33cc52 size=4></FONT></STRONG></P></TD></TR></TBODY></TABLE></P></TD></TR></TBODY></TABLE><BR>

 

返回目录

 

  评论这张
 
阅读(988)| 评论(7)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017