drop down button effect 请教

w3nta1

请问这个website的 drop down button effect是怎么弄的？
有plugin的吗还是用某某software弄的?
http://www.lbalum.com/

w3nta1

看了它的coding sibeh长

<script type="text/javascript" language="JavaScript1.2">
<!--
stm_bm(["yfatchr",430,"","blank.gif",0,"","",0,0,250,0,20,1,0,0,"","",0],this);
stm_bp("p0",[0,4,0,0,0,0,0,0,100,"",-2,"",-2,90,0,0,"#000000","transparent","btn_bg.gif",3,0,0,"#000000"]);
stm_ai("p0i0",[2,"","btn_about1.gif","btn_about2.gif",63,30,0,"","_self","","","","",0,0,0,"","",-1,-1,0,1,1,"#990000",1,"#cccccc",0,"","fade.gif",3,3,0,0,"#000000","#000000","#ffffff","#ffffff","9pt Arial","9pt Arial",0,0]);
stm_bpx("p1","p0",[1,4,0,0,0,1,8,0,100,"progidXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=1,motion=forward,enabled=0,Duration=0.50)",5,"",-2,60,0,0,"#000000","#cccccc","",3,1,1]);
stm_aix("p1i0","p0i0",[0,"About us","","",-1,-1,0,"about.htm","_self","","","","",3,3,0,"","",0,0,0,0,1,"#cc3300",0,"#cccccc",1,"","fade.gif",3,3,0,0,"#cccc00","#cccc00"]);
stm_aix("p1i1","p1i0",[0,"Vision","","",-1,-1,0,"vision.htm","_self","","","","",8,0]);
stm_aix("p1i2","p1i1",[0,"Mission Statement","","",-1,-1,0,"mission.htm"]);
stm_aix("p1i3","p1i1",[0,"Group Structure","","",-1,-1,0,"group.htm"]);
stm_aix("p1i4","p1i1",[0,"Award","","",-1,-1,0,"award.php"]);
stm_ep();
stm_aix("p0i1","p0i0",[2,"","btn_facalities1.gif","btn_facalities2.gif"]);
stm_bpx("p2","p1",[]);
stm_aix("p2i0","p1i1",[0,"Die Shop","","",-1,-1,0,"sub1.htm"]);
stm_aix("p2i1","p1i1",[0,"Extrusion","","",-1,-1,0,"extrusion.htm"]);
stm_aix("p2i2","p1i1",[0,"Anodising","","",-1,-1,0,"anodising.htm"]);
stm_aix("p2i3","p1i1",[0,"owder Coating","","",-1,-1,0,"powder.htm"]);
stm_aix("p2i4","p1i1",[0,"Engineering","","",-1,-1,0,"valued.htm"]);
stm_aix("p2i5","p1i1",[0,"Test Rig","","",-1,-1,0,"test.htm"]);
//stm_aix("p2i6","p1i1",[0,"Test Rig","","",-1,-1,0,"test.html"]);
//stm_aix("p2i7","p1i1",[0,"Quality","","",-1,-1,0,"quality.html"]);
stm_ep();
stm_aix("p0i2","p0i0",[2,"","btn_product1.gif","btn_product2.gif"]);
stm_bpx("p3","p1",[1,4,0,0,0,1,8,8]);
stm_aix("p3i0","p1i0",[0,"Extrusion ","","",-1,-1,0,"","_self","","","","",8,0,0,"","trir.gif",8,7]);
stm_bpx("p4","p1",[1,2,-50,0,0,3,8,0,100,"progidXImageTransform.Microsoft.Blinds(bands=8,direction=DOWN,enabled=0,Duration=0.20)",9,"",-2,90,0,0,"#7f7f7f","#ffffff"]);
stm_aix("p4i0","p1i0",[0,"Architecture &amp; Building Construction","","",-1,-1,0,"architecture.htm","_self","","","","",8,0,0,"","",0,0,0,0,1,"#cc3300",0,"#cccccc",0]);
//stm_aix("p4i1","p4i0",[0,"Doors & Windows","","",-1,-1,0,"doors.htm"]);
stm_aix("p4i2","p4i0",[0,"Electronic Components & Electrical Parts ","","",-1,-1,0,"electronic.htm"]);
stm_aix("p4i3","p4i0",[0,"Furniture & Interior Decoration","","",-1,-1,0,"furniture.htm"]);
stm_aix("p4i4","p4i0",[0,"Transportation","","",-1,-1,0,"transportation.htm"]);
//stm_aix("p4i5","p4i0",[0,"Others ","","",-1,-1,0,"others.htm"]);
stm_aix("p4i6","p4i0",[0,"Common Profiles & Others ","","",-1,-1,0,"common.htm"]);
stm_ep();
stm_aix("p3i1","p1i1",[0,"Expanded Mesh","","",-1,-1,0,"expanded.htm"]);
stm_aix("p3i2","p1i1",[0,"Aluminium Sheets / Coil","","",-1,-1,0,"aluminium.htm"]);
stm_aix("p3i3","p1i1",[0,"ALBE TEE Ceiling Suspension System","","",-1,-1,0,"albe.htm"]);
stm_aix("p3i4","p1i1",[0,"Fitting &amp; Accessories","","",-1,-1,0,"fitting.htm"]);
stm_ep();
stm_aix("p0i3","p0i0",[2,"","btn_services1.gif","btn_services2.gif"]);
stm_bpx("p5","p1",[]);
stm_aix("p5i0","p1i1",[0,"One Stop Service ","","",-1,-1,0,"export.html"]);
//stm_aix("p5i1","p1i1",[0,"Special Packaging ","","",-1,-1,0,"special.html"]);
//stm_aix("p5i2","p1i1",[0,"Technical Assistance               ","","",-1,-1,0,"technical.html"]);
//stm_aix("p5i3","p1i1",[0,"We understand Export ","","",-1,-1,0,"export.html"]);
stm_ep();
stm_aix("p0i4","p0i0",[2,"","btn_investors1.gif","btn_investors2.gif",102,30,0]);
stm_bpx("p6","p1",[]);
stm_aix("p6i0","p1i1",[0,"Financial Results ","","",-1,-1,0,"financial.htm"]);
stm_aix("p6i1","p1i1",[0,"Bursa Malaysia - Current news ","","",-1,-1,0,"current.htm"]);
stm_aix("p6i2","p1i1",[0,"Bursa Malaysia - Historical news ","","",-1,-1,0,"historical.htm"]);
//stm_aix("p6i3","p1i1",[0,"ress Release","","",-1,-1,0,"investor4.html"]);
stm_ep();
stm_aix("p0i5","p0i0",[2,"","btn_contact1.gif","btn_contact2.gif"]);
stm_bpx("p7","p4",[1,4,0,0,0,3,8,0,100,"progidXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=1,motion=forward,enabled=0,Duration=0.50)",5,"",-2,60]);
stm_aix("p7i0","p4i0",[0,"General Information           ","","",-1,-1,0,"general.php"]);
stm_aix("p7i1","p4i0",[0,"Branch Network                ","","",-1,-1,0,"branch.htm"]);
//stm_aix("p7i2","p4i0",[0,"Have question             ","","",-1,-1,0,"question.php"]);
//stm_aix("p7i2","p4i0",[0,"Have question             ","","",-1,-1,0,"question.php"]);
stm_ep();
stm_ep();
stm_em();
//-->
</script>

w3nta1

<div class="st_divcss" onmouseover="stppov(event,this,st_ms[0].ps[0]);" onmouseout="stppou(event,this,st_ms[0].ps[0]);" id="Stm0p0i" style="position: static; z-index: 1000; visibility: visible;"><table class="st_tbcss" style="border: 0px none rgb(0, 0, 0); background-color: transparent; background-image: url(btn_bg.gif); background-repeat: repeat;" id="Stm0p0iTB" cellpadding="0" cellspacing="0"><tbody><tr><td class="st_tdcss"><table class="st_tbcss" id="Stm0p0iTA" cellpadding="0" cellspacing="0"><tbody><tr id="Stm0p0iTRR"><td class="st_tdcss" id="Stm0p0i0e" onmouseover="stitov(event,this,st_ms[0].ps[0].is[0]);" onmouseout="stitou(event,this,st_ms[0].ps[0].is[0]);" onclick="stitck(event,this,st_ms[0].ps[0].is[0]);" title="" style="border: 0px none rgb(0, 0, 0); background-image: url(blank.gif); background-repeat: repeat; background-color: transparent; cursor: default; font-size: 1px;" valign="middle"><a class="st_acss" id="Stm0p0i0eHR" style="text-decoration: none;"><div class="st_divcss" id="Stm0p0i0eDR"><table class="st_tbcss" id="Stm0p0i0eTB" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="st_tdcss" style="padding: 0px; text-align: center; color: rgb(255, 255, 255);" id="Stm0p0i0eMTD" nowrap="nowrap" valign="middle"><font class="st_ftcss" id="Stm0p0i0eTX" style="cursor: default; font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 9pt; line-height: normal; font-size-adjust: none; font-stretch: normal; text-decoration: none;"><img src="about_files/btn_about1.gif" id="Stm0p0i0eIMG" border="0" height="30" width="63"></font></td><td class="st_tdcss" style="padding: 0px;" id="Stm0p0i0eRTD" align="center" nowrap="nowrap" valign="middle"><img src="about_files/blank.gif" id="Stm0p0i0eARROW" border="0"></td></tr></tbody></table></div></a></td><td class="st_tdcss" id="Stm0p0i1e" onmouseover="stitov(event,this,st_ms[0].ps[0].is[1]);" onmouseout="stitou(event,this,st_ms[0].ps[0].is[1]);" onclick="stitck(event,this,st_ms[0].ps[0].is[1]);" title="" style="border: 0px none rgb(0, 0, 0); background-image: url(blank.gif); background-repeat: repeat; background-color: transparent; cursor: default; font-size: 1px;" valign="middle"><a class="st_acss" id="Stm0p0i1eHR" style="text-decoration: none;"><div class="st_divcss" id="Stm0p0i1eDR"><table class="st_tbcss" id="Stm0p0i1eTB" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="st_tdcss" style="padding: 0px; text-align: center; color: rgb(255, 255, 255);" id="Stm0p0i1eMTD" nowrap="nowrap" valign="middle"><font class="st_ftcss" id="Stm0p0i1eTX" style="cursor: default; font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 9pt; line-height: normal; font-size-adjust: none; font-stretch: normal; text-decoration: none; color: rgb(255, 255, 255);"><img src="about_files/btn_facalities1.gif" id="Stm0p0i1eIMG" border="0" height="30" width="63"></font></td><td class="st_tdcss" style="padding: 0px;" id="Stm0p0i1eRTD" align="center" nowrap="nowrap" valign="middle"><img src="about_files/blank.gif" id="Stm0p0i1eARROW" border="0"></td></tr></tbody></table></div></a></td><td class="st_tdcss" id="Stm0p0i2e" onmouseover="stitov(event,this,st_ms[0].ps[0].is[2]);" onmouseout="stitou(event,this,st_ms[0].ps[0].is[2]);" onclick="stitck(event,this,st_ms[0].ps[0].is[2]);" title="" style="border: 0px none rgb(0, 0, 0); background-image: url(blank.gif); background-repeat: repeat; background-color: transparent; cursor: default; font-size: 1px;" valign="middle"><a class="st_acss" id="Stm0p0i2eHR" style="text-decoration: none;"><div class="st_divcss" id="Stm0p0i2eDR"><table class="st_tbcss" id="Stm0p0i2eTB" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="st_tdcss" style="padding: 0px; text-align: center; color: rgb(255, 255, 255);" id="Stm0p0i2eMTD" nowrap="nowrap" valign="middle"><font class="st_ftcss" id="Stm0p0i2eTX" style="cursor: default; font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 9pt; line-height: normal; font-size-adjust: none; font-stretch: normal; text-decoration: none;"><img src="about_files/btn_product1.gif" id="Stm0p0i2eIMG" border="0" height="30" width="63"></font></td><td class="st_tdcss" style="padding: 0px;" id="Stm0p0i2eRTD" align="center" nowrap="nowrap" valign="middle"><img src="about_files/blank.gif" id="Stm0p0i2eARROW" border="0"></td></tr></tbody></table></div></a></td><td class="st_tdcss" id="Stm0p0i3e" onmouseover="stitov(event,this,st_ms[0].ps[0].is[3]);" onmouseout="stitou(event,this,st_ms[0].ps[0].is[3]);" onclick="stitck(event,this,st_ms[0].ps[0].is[3]);" title="" style="border: 0px none rgb(0, 0, 0); background-image: url(blank.gif); background-repeat: repeat; background-color: transparent; cursor: default; font-size: 1px;" valign="middle"><a class="st_acss" id="Stm0p0i3eHR" style="text-decoration: none;"><div class="st_divcss" id="Stm0p0i3eDR"><table class="st_tbcss" id="Stm0p0i3eTB" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="st_tdcss" style="padding: 0px; text-align: center; color: rgb(255, 255, 255);" id="Stm0p0i3eMTD" nowrap="nowrap" valign="middle"><font class="st_ftcss" id="Stm0p0i3eTX" style="cursor: default; font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 9pt; line-height: normal; font-size-adjust: none; font-stretch: normal; text-decoration: none; color: rgb(255, 255, 255);"><img src="about_files/btn_services1.gif" id="Stm0p0i3eIMG" border="0" height="30" width="63"></font></td><td class="st_tdcss" style="padding: 0px;" id="Stm0p0i3eRTD" align="center" nowrap="nowrap" valign="middle"><img src="about_files/blank.gif" id="Stm0p0i3eARROW" border="0"></td></tr></tbody></table></div></a></td><td class="st_tdcss" id="Stm0p0i4e" onmouseover="stitov(event,this,st_ms[0].ps[0].is[4]);" onmouseout="stitou(event,this,st_ms[0].ps[0].is[4]);" onclick="stitck(event,this,st_ms[0].ps[0].is[4]);" title="" style="border: 0px none rgb(0, 0, 0); background-image: url(blank.gif); background-repeat: repeat; background-color: transparent; cursor: default; font-size: 1px;" valign="middle"><a class="st_acss" id="Stm0p0i4eHR" style="text-decoration: none;"><div class="st_divcss" id="Stm0p0i4eDR"><table class="st_tbcss" id="Stm0p0i4eTB" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="st_tdcss" style="padding: 0px; text-align: center; color: rgb(255, 255, 255);" id="Stm0p0i4eMTD" nowrap="nowrap" valign="middle"><font class="st_ftcss" id="Stm0p0i4eTX" style="cursor: default; font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 9pt; line-height: normal; font-size-adjust: none; font-stretch: normal; text-decoration: none; color: rgb(255, 255, 255);"><img src="about_files/btn_investors1.gif" id="Stm0p0i4eIMG" border="0" height="30" width="102"></font></td><td class="st_tdcss" style="padding: 0px;" id="Stm0p0i4eRTD" align="center" nowrap="nowrap" valign="middle"><img src="about_files/blank.gif" id="Stm0p0i4eARROW" border="0"></td></tr></tbody></table></div></a></td><td class="st_tdcss" id="Stm0p0i5e" onmouseover="stitov(event,this,st_ms[0].ps[0].is[5]);" onmouseout="stitou(event,this,st_ms[0].ps[0].is[5]);" onclick="stitck(event,this,st_ms[0].ps[0].is[5]);" title="" style="border: 0px none rgb(0, 0, 0); background-image: url(blank.gif); background-repeat: repeat; background-color: transparent; cursor: default; font-size: 1px;" valign="middle"><a class="st_acss" id="Stm0p0i5eHR" style="text-decoration: none;"><div class="st_divcss" id="Stm0p0i5eDR"><table class="st_tbcss" id="Stm0p0i5eTB" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="st_tdcss" style="padding: 0px; text-align: center; color: rgb(255, 255, 255);" id="Stm0p0i5eMTD" nowrap="nowrap" valign="middle"><font class="st_ftcss" id="Stm0p0i5eTX" style="cursor: default; font-family: Arial; font-style: normal; font-variant: normal; font-weight: normal; font-size: 9pt; line-height: normal; font-size-adjust: none; font-stretch: normal; text-decoration: none; color: rgb(255, 255, 255);"><img src="about_files/btn_contact1.gif" id="Stm0p0i5eIMG" border="0" height="30" width="63"></font></td><td class="st_tdcss" style="padding: 0px;" id="Stm0p0i5eRTD" align="center" nowrap="nowrap" valign="middle"><img src="about_files/blank.gif" id="Stm0p0i5eARROW" border="0"></td></tr></tbody></table></div></a></td></tr></tbody></table></td></tr></tbody></table></div>
                      </div></td>
                    <td width="2%"><div align="right"><a href="http://www.lbalum.com/index.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image191','','btn_home2.gif',1)"><img src="about_files/btn_home1.gif" name="Image191" id="Image191" border="0" height="30" width="63"></a></div>

w3nta1

请用IE. Firefox看不到effect

vampcheah

还好吧,我是绝对不用not competible with FF 或IE 的
我也有做过类似的MENU虽然效果没那么好但是至少能在FF 也开到.

w3nta1

还好，FF只是看不到alpha effect罢了

goatstudio

去这里找找看:
http://www.dynamicdrive.com/dynamicindex1/indexc.html

pony

如果你要的是 menubar，不妨游览 Brainjar 的网页，那有 step-by-step 的教程。
http://www.brainjar.com/dhtml/menubar/default.asp

至于只能在 IE 看到的效果是 Image Transitions 。
www.lbalum.com 用的是其中的 GradientWipe 。
以下的网站有教程
http://www.permadi.com/tutorial/jsImgTransition/index.html
http://www.javascriptkit.com/filters/index.shtml
这是微软自己的　ｃｓｓ，所以其他的游览器不管是现在还是将来都不会支援。
用不用就看你自己了。

Laurent Bugnion 写了个可以在 IE 和 Firefox 执行的 fading 效果的 javascript 。
有兴趣的话不妨试试。
http://www.galasoft-lb.ch/myjavascript/WebControls/faded-node.html

vampcheah

原帖由 pony 于 29-8-2007 02:54 AM 发表
如果你要的是 menubar，不妨游览 Brainjar 的网页，那有 step-by-step 的教程。
http://www.brainjar.com/dhtml/menubar/default.asp

至于只能在 IE 看到的效果是 Image Transitions 。
www.lbalum.com 用 ...

哇,你提供的网站让我学不少.谢谢了.