圖片與透明FLASH組合畫面的代碼設置

上圖是音畫日誌中常見的圖片與透明FLASH的組合畫面，它的代碼是：<TABLE style="POSITION: relative; WIDTH: 597px; TOP: 20px; LEFT: 160px" border=0 cellSpacing=0 cellPadding=10 background=http://image31.360doc.com/DownloadImg/2011/06/3016/13589968_1.jpg height=733><TBODY><TR><TD><EMBED style="Z-INDEX: 3; POSITION: absolute; WIDTH: 535px; HEIGHT: 400px; TOP: 25px; LEFT: 25px" type=application/octet-stream src=http://www.shuyunxin.com/cc/flash/125.swf allowNetworking="internal" allowScriptAccess="never" quality="high" invokeurls="false" wmode="transparent"></TD></TR></TBODY></TABLE><TABLE style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)gray(); WIDTH: 200px; HEIGHT: 83px"><TBODY><TR></TR></TBODY></TABLE>上半段紅色字元的部分是圖片的代碼；下半段藍色字元部分是透明FLASH的代碼。對初學者，不必要弄清楚每一個代碼的含義，只要明確那些關鍵的代碼和如何調整就就可以了。對於圖片來說，主要參數是這三項：1、什麼圖片；2、圖片的大小；3、圖片在窗口中的位置。覆蓋在圖片上的FLASH透明動畫也是這三項。一般動畫的大小總是比圖片小一點，否則動畫就跑到圖片的畫面外去了，有時動畫的畫面要設置得比圖片的畫面小得多，才不會出現蜜蜂比花大。動畫在圖片上的位置調整也很重要，也很麻煩，否則會出現鳥在地上飛，鴨在天上游的情況。下面我們來看一下圖片代碼中的一些參數的意義和調整方法，還是把上面把的圖片代碼複製到下面：<TABLE style="POSITION: relative; WIDTH: 597px; TOP: 10px; LEFT: 160px" border=0 cellSpacing=0 cellPadding=10 background=http://image31.360doc.com/DownloadImg/2011/06/3016/13589968_1.jpg height=733><TBODY><TR>其中：LEFT: 160px是圖片的左邊距，也就是圖片與日誌窗口左邊的距離，現在是160，這個數值越大，圖片離開窗口左邊的距離越大，這個數值有時可能是負的。WIDTH: 597px 是圖片顯示的寬度，現在是597，如果原圖的實際尺寸大於597，則會縮小到597顯示，如果原圖的尺寸小於597，則會重複顯示同樣圖片的一部分來填補。所以選擇圖片的實際尺寸應稍大於要顯示的尺寸。TOP: 10px 是圖片的頂邊距，現在是20，改變這個數值就可以改變圖片與日誌窗口頂邊的距離，或者與上一張圖片的距離。這個數值有時也可能是負的。height=733是圖片的顯示高度，現在是733，如果原圖的實際尺寸大於733，則會縮小到733顯示，如果原圖的尺寸小於733，則會重複顯示同樣圖片的一部分來填補。所以圖片的實際尺寸應稍大於要顯示的尺寸。http://image31.360doc.com/DownloadImg/2011/06/3016/13589968_1.jpg 這就是圖片的網路地址，現在是圖片《江南》，如果要換成其它圖片，只要把其它圖片的地址替換這個地址就可以了。特別要注意，地址的結尾「jpg」與後面的「border=0>」之間一定要留有空格，否則圖片就不能顯示。下面是flash動畫部分的代碼：<TD><EMBED style="Z-INDEX: 3; POSITION: absolute; WIDTH: 535px; HEIGHT: 400px; TOP: 25px; LEFT: 25px" type=application/octet-stream src=http://www.shuyunxin.com/cc/flash/125.swf wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></TD></TR></TBODY></TABLE><TABLE style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)gray(); WIDTH: 200px; HEIGHT: 83px"><TBODY><TR></TR></TBODY></TABLE>和圖片代碼基本相同：LEFT: 25px 動畫的左邊距；WIDTH: 535px 動畫的寬度；TOP: 25px動畫的頂邊距；HEIGHT: 400px 動畫的高度；http://www.shuyunxin.com/cc/flash/125.swf 動畫的地址。其它的一些代碼含義，以後逐步加以說明。下面做個練習，熟悉代碼的使用和參數的調整：1、把開頭的圖片與透明FLASH的組合畫面的代碼，複製到「寫日誌」的代碼編輯窗口中，用「預覽」看一下顯示效果；2、回到代碼編輯窗口，改變圖片的寬度、高度、左邊距、頂邊距等的其中某一個參數（要記住原來的參數，不行就可以改還去），「預覽」一下修改後的顯示效果，如些反覆調調整、預覽，一直到滿意為止。3、把原來的圖片地址，改成其它圖片的地址，預覽顯示結果，，如果圖片不能顯示，很可能是地址結尾「jpg」後面沒有留下空格：4、在動畫代碼中，用同樣方法改變flash透明動畫的地址和各項參數，特別注意修改完的顯示效果，往往要對動畫的大小和位置反覆調整，才能得到比較好的顯示效果。5、當日誌有數張圖片組成，只要在第一張圖片的代碼下，複製相同的代碼，然後把代碼中的圖片和動畫地址改成新的地址。一般圖片的各項參數和第一張一樣，就是頂邊距「TOP: 25px」這一參數要調整，以改變二張圖片之間的距離。二張畫面的代碼如下：<TABLE style="POSITION: relative; WIDTH: 597px; TOP: 20px; LEFT: 160px" border=0 cellSpacing=0 cellPadding=10 background=http://image31.360doc.com/DownloadImg/2011/06/3016/13589968_1.jpg height=733><TBODY><TR><TD><EMBED style="Z-INDEX: 3; POSITION: absolute; WIDTH: 535px; HEIGHT: 400px; TOP: 25px; LEFT: 25px" type=application/octet-stream src=http://www.shuyunxin.com/cc/flash/125.swf wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></TD></TR></TBODY></TABLE><TABLE style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)gray(); WIDTH: 200px; HEIGHT: 83px"><TBODY><TR></TR></TBODY></TABLE><TABLE style="POSITION: relative; WIDTH: 597px; TOP: 20px; LEFT: 160px" border=0 cellSpacing=0 cellPadding=10 background=http://image31.360doc.com/DownloadImg/2011/06/3016/13589968_2.jpg height=733><TBODY><TR><TD><EMBED style="Z-INDEX: 3; POSITION: absolute; WIDTH: 535px; HEIGHT: 500px; TOP: 40px; LEFT: 25px" type=application/octet-stream src=http://imgfree.21cn.com/free/flash/49.swf wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></TD></TR></TBODY></TABLE><TABLE style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)gray(); WIDTH: 200px; HEIGHT: 83px"><TBODY><TR></TR></TBODY></TABLE>紅色的是第一幅畫面的代碼，藍色的是第二幅畫面的代碼。比較二幅畫面中的黑色字體，就可以看出替代部分的內容內容差別。把這二幅畫面的代碼複製到日誌編輯器代碼編輯窗口中，預覽的結果如下圖

同樣方法可以插入第三幅、第四幅……最後對日誌的全部畫面顯示情況作用次檢查和調整，一直到滿意為止。
推薦閱讀：