Home

About Proweb

Services

Our Infrastructure

Portfolio

Articles

Career

Contact Us

Search

Drop down menu CSS di atas Flash

Kita akan kesulitan saat membuat menu CSS sedangkan di bawahnya ada flash. Menu CSS kita akan kalah sehingga tidak muncul. Untuk mengatasi hal ini dibuat saat menu pull down muncul flashnya berubah menjadi JPG. Berikut langkah-langkah mengimplementasikan hal ini.

1. Pastikan div untuk flash tersebut absolut, berikan id header_flash
2. Buat div untuk jpeg dengan posisi yang sama persisi dengan flash dan beri id: header_jpeg
3. Buat script untuk set_header spt contoh berikut :
   <script language="javascript">
   var is_wait=0;
   var str_header="flash";
   var last_flash="";
   var last_jpeg="";
   var str_ket="";
   
   function set_header(new_header,debug)
   {
       str_ket=debug;
       var d=new Date();
   
       if (new_header=="flash")
       {
           last_flash=d.getTime();
       }
       else if (new_header=="jpeg")
       {
           last_jpeg=d.getTime();
       }
      
       if (new_header==str_header)
       {
           return;
       }
      
   
       if (new_header=="flash" && !is_wait)
       {
           is_wait=1;
           setTimeout("set_to_flash()",1000);
       }
      
       if (new_header=="jpeg")
       {
           document.getElementById("header_flash").style.visibility="hidden";
           document.getElementById("header_jpeg").style.visibility="visible";
           str_header="jpeg";
           last_jpeg=d.getTime();
           //document.getElementById("log").value= document.getElementById("log").value + "\n" + new_header + " " + debug;
       }
   }
   
   function set_to_flash()
   {
       is_wait=0;
       if (last_flash>last_jpeg)
       {
           //document.getElementById("log").value= document.getElementById("log").value + "\n flash" + " " + str_ket;
           document.getElementById("header_jpeg").style.visibility="hidden";
           document.getElementById("header_flash").style.visibility="visible";
           str_header="flash";
       }
   }
   </script>
4. Pada setiap link yang termasuk pull down tambahkan fungsi tersebut untuk onmouseover dan onmouseout seperti contoh berikut:
                       <ul>
                               <li>
                                   <h3><a href="/outlet/" onmouseover="set_header('jpeg','outlet')" onmouseout="set_header('flash','outlet')">Daftar Outlet</a></h3>
                                   <ul><!-- drop down menu items -->
                                       <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">Ambasador</a></li>
                                       <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">Bali Rimo</a></li>
                                       <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">BEC Bandung</a></li>
                                   <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">BSD</a></li>
                                   <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">Dusit</a></li>
                                   <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">M2M</a></li>
                                   <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">Oliser Bali Kerobokan</a></li>
                                   <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">Oliser Balik Papan</a></li>
                                   <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">Oliser Batam</a></li>
                                   <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">Oliser Bekasi Timur</a></li>
                                   <li><a href="/outlet/" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">more</a></li>      
                                     </ul>
                               </li>
                             </ul>   
5. Atau untuk coding lengkapnya:
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>Contoh saja</title>
   <link href="oliser.css" rel="stylesheet" type="text/css" />
   <link href="multi_drop_menus_class.css" rel="stylesheet" type="text/css" />
   <style type="text/css">
   <!--
   #header_jpeg
   {
       visibility:hidden;
   }
   -->
   </style>
   </head>
   
   <body>
   <script language="javascript">
   var is_wait=0;
   var str_header="flash";
   var last_flash="";
   var last_jpeg="";
   var str_ket="";
   
   function set_header(new_header,debug)
   {
       str_ket=debug;
       var d=new Date();
   
       if (new_header=="flash")
       {
           last_flash=d.getTime();
       }
       else if (new_header=="jpeg")
       {
           last_jpeg=d.getTime();
       }
      
       if (new_header==str_header)
       {
           return;
       }
      
   
       if (new_header=="flash" && !is_wait)
       {
           is_wait=1;
           setTimeout("set_to_flash()",1000);
       }
      
       if (new_header=="jpeg")
       {
           document.getElementById("header_flash").style.visibility="hidden";
           document.getElementById("header_jpeg").style.visibility="visible";
           str_header="jpeg";
           last_jpeg=d.getTime();
           //document.getElementById("log").value= document.getElementById("log").value + "\n" + new_header + " " + debug;
       }
   }
   
   function set_to_flash()
   {
       is_wait=0;
       if (last_flash>last_jpeg)
       {
           //document.getElementById("log").value= document.getElementById("log").value + "\n flash" + " " + str_ket;
           document.getElementById("header_jpeg").style.visibility="hidden";
           document.getElementById("header_flash").style.visibility="visible";
           str_header="flash";
       }
   }
   </script>
   <div id="background">
     <div id="wrapper">
           <div id="tengah">
               <div id="menu">
                     <div id="menu_atas">
                       <h1></h1>
                       <h2><a href="/contact/">Contact Us</a></h2>
                       <img src="images/img1.gif" alt="" />
                       <h2><a href="/">Home</a></h2>
                       <img src="images/img2.gif" alt="" />
                       <div class="clear"></div><!--end of clear-->
                   </div><!--end of menu_atas-->
                   <div id="menu_utama">
                  
                       <div class="multi_drop_menus"><!-- adding class="vertical" creates a vertical (stacked) first level menu - remove for a horizontal first level -->
                            <ul>
                               <li>
                                   <h3><a href="/outlet/" onmouseover="set_header('jpeg','outlet')" onmouseout="set_header('flash','outlet')">Daftar Outlet</a></h3>
                                   <ul><!-- drop down menu items -->
                                       <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">Ambasador</a></li>
                                       <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">Bali Rimo</a></li>
                                       <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">BEC Bandung</a></li>
                                   <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">BSD</a></li>
                                   <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">Dusit</a></li>
                                   <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">M2M</a></li>
                                   <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">Oliser Bali Kerobokan</a></li>
                                   <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">Oliser Balik Papan</a></li>
                                   <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">Oliser Batam</a></li>
                                   <li><a href="/outlet/detail.php" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">Oliser Bekasi Timur</a></li>
                                   <li><a href="/outlet/" onmouseover="set_header('jpeg',0)" onmouseout="set_header('flash',0)">more</a></li>      
                                     </ul>
                               </li>
                             </ul>
                       </div>
                      
                       <div class="clear"></div><!--end of clear-->
                   </div>
                   <!--end of menu_utama-->
                   </div>
                  <!--end of menu-->
               <h4 id="header_flash">
                 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="992" height="314">
                   <param name="movie" value="oliser.swf" />
                   <param name="quality" value="high" />
                   <embed src="oliser.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="992" height="314"></embed>
                 </object>
               </h4>
               <h4 id="header_jpeg">
               <img src="images/flash.jpg" />
               </h4>
           </div><!--end of tengah-->
       </div>
       <!--end of wrapper-->
   </div>
   <!--end of backgound-->
   </body>
   </html>
6. Jika masih kurang jelas silahkan lihat di http://www.prowebpro.com/pic/arisg/menuoverflash/

Kunjungi www.prowebpro.com untuk menambah wawasan anda.