[06/14][教程]论坛发表音画贴代码详解(新手适用)

南齐云

论坛发表音画代码一（适用于单张图片）

[ 本帖最后由 南齐云 于 2008-6-13 22:36 编辑 ]

南齐云

代码如下： <DIV style="LEFT: -210px; WIDTH: 1000px; POSITION: relative; TOP: 100px"> <TABLE height=900 cellPadding=0 width=1000 background=http://bbs.xyhc.com/attachments/month_0806/20080614_9f76ee0f2e182ccb5a10rD1kQc1pXWyY.jpg border=0> <TBODY> <TR> <TD> <EMBED style="LEFT: 350px; WIDTH: 400px; POSITION: absolute; TOP: 300px; HEIGHT: 500px" src=http://sucai.heima.com/sucai/news/flash/5.swf width=500 height=500 type=application/octet-stream wmode="transparent" quality="high"></EMBED> <EMBED style="LEFT: 250px; WIDTH: 600px; POSITION: absolute; TOP: 120px; HEIGHT: 400px" src=http://imgfree.21cn.com/free/flash/159.swf width=600 height=500 type=application/octet-stream wmode="transparent" quality="high"></EMBED> <P><EMBED title=dvubb width=1 height=1 type=application/x-mplayer2 autoplay="false" filename="http://image.fotoever.com/PhotoServer01/Blog/Music/1132037/318200843454AM85034.mp3"showdisplay="0" showc showstatusbar="0" showgotobar="0" autostart="TRUE" playcount="0" volume="0"></EMBED></P> </TD></TR></TBODY></TABLE></DIV><BR><BR><BR><BR><BR>

[ 本帖最后由 南齐云 于 2008-6-13 22:33 编辑 ]

南齐云

代码共分五部分，分别用不同颜色标出。

第一部分：<DIV style="LEFT: -210px; WIDTH: 1000px; POSITION: relative; TOP: 100px">

此部分为定位整个贴子，
LEFT: -210px 是指贴子距左边的距离，因为已经超出了发贴范围，故为负数
WIDTH: 1000px;是指贴子本身的宽度
TOP: 100px">为贴子上边距离顶部的距离。


第二部分定义图片
<TABLE height=900 cellPadding=0 width=1000 background=http://bbs.xyhc.com/attachments/month_0806/20080614_9f76ee0f2e182ccb5a10rD1kQc1pXWyY.jpg border=0>
<TBODY>
<TR>
<TD>

height=900指图片高度
width=1000指图片宽度


第三部分定义透明flash
<EMBED style="LEFT: 350px; WIDTH: 400px; POSITION: absolute; TOP: 300px; HEIGHT: 500px" src=http://imgfree.21cn.com/free/flash/61.swf width=500 height=500 type=application/octet-stream wmode="transparent" quality="high"></EMBED>

LEFT: 350px; 是指透明flash左边，距离贴子左边的距离
WIDTH: 400px是指透明flash本身的宽度

TOP: 120px; 是指flash的上边，距离贴子上边的距离
HEIGHT: 400px" 是指透明flash本身的高度。
贴中举例为加两个透明flash，所以代码重复。数值不同，定位不同。

第四部分为定义音乐链接
<P><EMBED title=dvubb width=1 height=1 type=application/x-mplayer2 autoplay="false" filename="http://image.fotoever.com/PhotoServer01/Blog/Music/1132037/318200843454AM85034.mp3" showdisplay="0" showc showstatusbar="0" showgotobar="0" autostart="TRUE" playcount="0" volume="0"></EMBED></P>

此处我不详细的说了，一般照搬以前代码，更换音乐地址即可。

第五部分为贴子结尾。可以适当的多加几个<BR>,以免贴子下边超出发贴范围，或者盖住了签名。

</TD></TR></TBODY></DIV></TABLE><BR><BR><BR><BR><BR>

[ 本帖最后由 南齐云 于 2008-6-13 22:34 编辑 ]

南齐云

 

音画贴第二种代码 (适用于多张图片且为分割的图片)

<DIV style="LEFT: -210px; WIDTH: 1000px; POSITION: relative; TOP: 120px">

<IMG src="图片地址1">

<DIV id=layer3 style="Z-INDEX: 3; LEFT: -250px; WIDTH: 100px; POSITION: absolute; TOP: 3600px; HEIGHT: 100px"><EMBED align=right src=http://imgfree.21cn.com/free/flash/31.swf width=0 height=0 type=application/octet-stream wmode="transparent" quality="high"></DIV>


<IMG src="图片地址2">

<DIV id=layer3 style="Z-INDEX: 3; LEFT: 300px; WIDTH: 100px; POSITION: absolute; TOP: 4500px; HEIGHT: 100px"><EMBED align=right src=http://imgfree.21cn.com/free/flash/31.swf width=900 height=300 type=application/octet-stream wmode="transparent" quality="high"></DIV>


<EMBED src=http://www.kmone.cn/sanxing/gsls.mp3 width=1 height=1 hidden=true type=audio/mpeg AUTOSTART="1" loop="-1">

</DIV><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

南齐云

此代码是为了解决分割图片发贴时出现一横线而设置的。略有不同

第一部分仍为定义贴子，参考值与上一种方法相同。
<DIV style="LEFT: -210px; WIDTH: 1000px; POSITION: relative; TOP: 120px">


第二部分，定义图片

<IMG src="图片地址1"> 注意，此部分就是你图片本身的宽和高，不能再自己定义

第三部分定义flash，代码使用的不同，但各项参考值的定义相同。

<DIV id=layer3 style="Z-INDEX: 3; LEFT: -250px; WIDTH: 100px; POSITION: absolute; TOP: 3600px; HEIGHT: 100px"><EMBED align=right src=http://imgfree.21cn.com/free/flash/31.swf width=0 height=0 type=application/octet-stream wmode="transparent" quality="high"></DIV>


第四部分定义音乐链接，此代码较上一种方便简单，但效果相同。
<EMBED src=http://www.kmone.cn/sanxing/gsls.mp3 width=1 height=1 hidden=true type=audio/mpeg AUTOSTART="1" loop="-1">



第五部分贴子结尾代码，一样多加些<BR>

</DIV><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

kittenmimi

谢谢南齐云

详尽细致的教程，

学做音画的帮手，

大家一起来学习，

简单易学快动手。