您好!欢迎你光临[教程]用HTML代码制作的各种图片_芳华苑!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>网络教材>>>FLASH实用教材>>>[教程]用HTML代码制作的各种图片
[教程]用HTML代码制作的各种图片
发表日期:2007/9/16 9:20:00 出处:未知 作者:未知 发布人:qiudao7707 已被访问 2418

一.贴图的基础代码

代码为:<IMG src="uploadpic/2006102421152447531.jpg" width=350>

二.淡化边缘效果

代码为:<IMG style="FILTER: Alpha(opacity=100,style=1)" src="uploadpic/2006102421152447531.jpg" width=350>

代码为:<IMG style="FILTER: Alpha(opacity=100,style=2)" src="uploadpic/2006102421152447531.jpg" width=350>

代码为:<IMG style="FILTER: Alpha(opacity=100,style=3)" src="uploadpic/2006102421152447531.jpg" width=350>

代码为:<IMG style="FILTER: Alpha(opacity=0,finishopacity=100,style=1)" src="uploadpic/2006102421152447531.jpg" width=350>

三.图片加框效果

代码为:1.<img src="uploadpic/2006102421152447531.jpg" width=350 style="border:8px #987cb9 dotted">

2.<IMG style="BORDER-RIGHT: #987cb9 8px dotted; BORDER-TOP: #987cb9  8px dotted; BORDER-LEFT: #987cb9  8px dotted; BORDER-BOTTOM: #987cb9  8px dotted" src="uploadpic/2006102421152447531.jpg">

 

代码为:<img src="uploadpic/2006102421152447531.jpg" width=350 style="border:12px #987cb9 double">

代码为:<P align=center><img src="uploadpic/2006102421152447531.jpg" width=350 style="border:5px #987cb9 dashed">

代码为:<img src="uploadpic/2006102421152447531.jpg" width=350 style="border:12px #987cb9 groove">

代码为:<table style="border:3 dashed #f6ae56" cellspacing="5" cellpadding="0" bgcolor="#f6ae56"><tr><td bgcolor="#aeffae" width=350  align=center ><img src="uploadpic/2006102421152447531.jpg">

代码为: <img src="uploadpic/2006102421152447531.jpg" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=10)">

四.图片移动效果

代码为:<MARQUEE direction=right  scrollamount=10><IMG src="uploadpic/2006102421152447531.jpg"></MARQUEE>

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

代码为:<marquee width=100% behavior=alternate scrollamount=10><img src=uploadpic/2006102421152447531.jpg width=350 ></marquee>

代码为:<marquee width=100% behavior=slide scrollamount=10><img src=uploadpic/2006102421152447531.jpg width=350 ></marquee>

代码为::<marquee direction=left><marquee behavior=alternate direction=up height=500><img src=uploadpic/2006102421152447531.jpg> </marquee>

代码为:<marquee width=350 ><img src=uploadpic/2006102421152447531.jpg width=350>  </marquee><marquee direction=right width=350 ><img src=uploadpic/2006102421152447531.jpg width=350>  </marquee>

代码为:<marquee direction=up  scrollamount=3><center><img src=uploadpic/2006102421152447531.jpg width=350></marquee><marquee direction=down scrollamount=3> <center> <div style="width:350;filter:flipv;"><img src="uploadpic/2006102421152447531.jpg" width=350></div></center></marquee>

代码为:
<MARQUEE scrollAmount=3 direction=right behavior=alternate>
<MARQUEE direction=up behavior=alternate width=100 height=500>
<P align=center><IMG src="uploadpic/2006102421152447531.jpg"></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="uploadpic/2006102421152447531.jpg" width=175></MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 width=175><IMG src="uploadpic/2006102421152447531.jpg" width=175></MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 direction=right width=175><IMG style="FILTER: fliph()" src="uploadpic/2006102421152447531.jpg" width=175></MARQUEE></TD>
<TD align=middle>
<MARQUEE scrollAmount=1 scrollDelay=100 width=175><IMG src="uploadpic/2006102421152447531.jpg" width=175></MARQUEE></TD></TR></TBODY></TABLE>

代码为:  <marquee width=100% behavior=alternate scrollamount=10><img src=uploadpic/2005111175152608.jpg width=350 ></marquee>

 

 

代码为:  <marquee width=100% behavior=slide scrollamount=10><img src=uploadpic/2005111175152608.jpg width=350 ></marquee>

 

 

代码为:  <marquee direction=left><marquee behavior=alternate direction=up height=500><img src=uploadpic/2005111175152608.jpg> </marquee>

 

 

代码为:  <marquee width=350 ><img src=uploadpic/2006102421152447531.jpg width=350>  </marquee><marquee direction=right width=350 ><img src=uploadpic/2005111175152608.jpg width=350>  </marquee>

 

 

五.图片的一些效果的组合

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

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

代码为: <MARQUEE style="WIDTH: 1000px " scrollAmount=5 direction=right>
 <img src="uploadpic/2006102421152447531.jpg"  width=350  style="border:8px #987cb9 dotted"></MARQUEE>

六.图片的另外一些滤镜效果


代码为: <IMG height=232 src="uploadpic/2006102421152447531.jpg" width=310><BR><IMG id=reflection style="FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30)  blur() flipv()" height=232 src="uploadpic/2006102421152447531.jpg" width=310>

代码为: <IMG style="FILTER: progid:DXImageTransform.Microsoft.Emboss()" src="uploadpic/2006102421152447531.jpg">

代码为: <IMG style="FILTER: gray" src="uploadpic/2006102421152447531.jpg">

代码为:<img src="uploadpic/2006102421152447531.jpg" style="filter:invert">

七.用JavaScript实现的其它图片效果



八、加框有一层FLASH的图片

 
代码:
<DIV align=center>
<TABLE height=300 cellSpacing=0 cellPadding=0 width=400 align=center background=http://xz2.2000y.net/314311/uploadpic/2005111175152608.jpg border=1 bortercolor="#000000">
<TBODY>
<TR>
<TD>
<P align=center><EMBED src=http://nnwkl.16789.net/domName/nnwkl/2006112221444440372.swf width=400 height=300 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"> </P></TD></TR></TBODY></TABLE></DIV>

两个FLASH上下排列的图片



代码:

<DIV align=center>
<TABLE height=300 cellSpacing=0 cellPadding=0 width=400 align=center background=http://xz2.2000y.net/314311/uploadpic/2005111175152608.jpg border=1 bortercolor="#000000">
<TBODY>
<TR>
<TD>
<P align=center><EMBED src=http://nnwkl.16789.net/domName/nnwkl/2006112221444440372.swf width=400 height=150 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"> <BR><BR><EMBED src=http://nnwkl.16789.net/domName/nnwkl/200611231902457446.swf width=400 height=110 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"></P></TD></TR></TBODY></TABLE></DIV>

 

十、加框用两层FLASH的图片




代码:<P align=center>
<TABLE height=300 cellSpacing=0 cellPadding=0 width=400 background=http://xz2.2000y.net/314311/uploadpic/2005111175152608.jpg border=3 bortercolor="#000000">
<TBODY>
<TR>
<TD>
<P align=center><EMBED align=right src=http://nnwkl.16789.net/domName/nnwkl/2006112221444440372.swf width=400 height=280 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"> <BR><BR><EMBED align=right src=http://nnwkl.16789.net/domName/nnwkl/200611231902457446.swf width=380 height=245 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high" tybe="application/x-shockwave-flash"> <BR></P></TD></TR></TBODY></TABLE></P>

 

代码:

<P align=center>
<TABLE borderColor=#008b8b cellSpacing=6 cellPadding=6 width=380 bgColor=#000000 background=http://xz2.2000y.net/314311/uploadpic/2006100111375718467.gif border=1 hight="280">
<TBODY>
<TR>
<TD>
<TABLE borderColor=#800080 height=280 width=380 background=http://xz2.2000y.net/314311/uploadpic/2005111175152608.jpg border=0>
<TBODY>
<TR>
<TD><FONT color=#f0e68c>
<DIV align=center><EMBED align=right src=http://nnwkl.16789.net/domName/nnwkl/2006112221444440372.swf width=380 height=280 type=application/x-shockwave-flash tybe="application/x-shockwave-flash" quality="high" menu="false" wmode="transparent"></DIV>
<DIV align=center><EMBED align=right src=http://nnwkl.16789.net/domName/nnwkl/2006112318581354843.swf width=380 height=280 type=application/x-shockwave-flash tybe="application/x-shockwave-flash" quality="high" menu="false" wmode="transparent"></DIV></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>

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

代码:

<P align=center><STRONG><FONT color=#008b8b></FONT></STRONG>&nbsp;</P>
<P align=center>
<SCRIPT language=JavaScript>
i=0;
function f_wave()
{i=i-4;
ShowCool.style.filter="Wave(Freq=1,LightStrength=80,Phase=" + i + ")";
setTimeout("f_wave()",100);
}
window.onload=f_wave;</SCRIPT>
<STRONG><FONT color=#008b8b><IMG id=ShowCool style="FILTER: Wave(Freq=1,LightStrength=80,Phase=-11384)" height=263 src="uploadpic/2005111175152608.jpg" width=350></FONT></STRONG> <BR>
<P align=center>
<SCRIPT language=JavaScript>
var b = 1;
var c = true;
function helpor_net(){
if(document.all);
if(c == true) {
b++;
}
if(b==100) {
b--;
c = false
}
if(b==10) {
b++;
c = true;
}
if(c == false) {
b--;
}
u.filters.alpha.opacity=0 + b;
setTimeout("helpor_net()",50);
}
helpor_net();
</SCRIPT>
</P>

 

 


 

代码:

<P align=center><IMG style="FILTER: alpha(opacity=0)" src="uploadpic/2005111175152608.jpg" border=1 name=u>
<SCRIPT language=JavaScript>
var b = 1;
var c = true;
function helpor_net(){
if(document.all);
if(c == true) {
b++;
}
if(b==100) {
b--;
c = false
}
if(b==10) {
b++;
c = true;
}
if(c == false) {
b--;
}
u.filters.alpha.opacity=0 + b;
setTimeout("helpor_net()",50);
}
helpor_net();
</SCRIPT>
 </P>
 

十、图片上写文字

在这写上文字

代码:

<DIV align=center>
<TABLE style="FILTER: Alpha(opacity=100,finishOpacity=0,style=0)" height=260 width=350>
<TBODY>
<TR>
<TD style="BACKGROUND-POSITION: center center; BACKGROUND-REPEAT: repeat" vAlign=center align=middle background=http://xz2.2000y.net/314311/uploadpic/2005111175152608.jpg>
<P align=center><FONT style="FONT-SIZE: 20pt" face=宋体_GB2312 color=#dc143c><STRONG>在这写上文字</STRONG></FONT></P></TD></TR></TBODY></TABLE></DIV>

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:



我是一片云qyp
(2008/3/24 15:31:00)

大家爱戴的老师,我们永远支持你


9939800023
(2008/2/8 20:01:00) [222.60.74.]

今天运气真好,碰到了 &nbs


明明
(2008/1/30 10:58:00) [58.245.110.]

您是大家的良师益友,支持您!在


pingfannvren
(2007/10/31 12:34:00)

先学习怎么发表帖子你就知道这些


风雪夜归人
(2007/10/29 23:19:00) [58.50.119.]

教材太棒了可我就是不懂怎么放,"

 发表评论:共有 8 条评论

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

关闭

芳华苑 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:勿忘我:QQ:549966146

琼icp备09005167