火力光波的博客

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

日志

关于我

火力光波

文章分类

图帖制作方法及代码

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实现的其它图片效果

效果：

效果：

效果：

效果：

效果：

姐妹情缘深

<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>

返回目录

评论这张

转发至微博

阅读(1268)| 评论(7)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_085067092094089067081087094095092086086071081094095066',
              blogTitle:'图帖制作方法及代码',
              blogAbstract:' \r\n<P align=\"center\"  \><FONT color=\"#008b8b\"  size=\"4\"  \><STRONG\></STRONG\></FONT\> </P\>\r\n<P align=\"center\"  \><FONT color=\"#008b8b\"  size=\"4\"  face=\"黑体\"  \>一、贴图的基础代码<BR\></FONT\></P\>\r\n<P align=\"center\"  \><IMG style=\"text-align: center; display: block;\"   title=\"贴图制作方法及代码  - 火力光波 - 火力光波的博客\"   alt=\"贴图制作方法及代码  - 火力光波 - 火力光波的博客\"   src=\"http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg\"   width=\"350\"  \> </P\>\r\n<P align=\"center\"  \><FONT color=\"#808080\"  \>代码为:</FONT\> <FONT color=\"#ff00ff\"  \> <IMG src=\"</FONT\><A href=\"http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg\"   \><FONT color=\"#ff00ff\"  \>http://img.blog.163.com/photo/lBDPaSJ3FQuElYXNca6OZg==/1730789631794753060.jpg</FONT\></A\><FONT color=\"#ff00ff\"  \>\" width=350></FONT\></P\>\r\n',
              blogTag:'',
              blogUrl:'blog/static/80745891200872584235729',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1496228684246,
              publishTime:1219624955729,
              permalink:'blog/static/80745891200872584235729',
              commentCount:7,
              mainCommentCount:7,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/80745891200872584235729">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

火力光波的博客

导航

日志

图帖制作方法及代码

历史上的今天

最近读者

热度

评论

页脚