Teknologi 3D pada Halaman WEB: DIALOG BOX dengan EFFECT SHADOW

HAPUS KODE BR / pada script!

DIALOG BOX dengan EFFECT SHADOW seperti pada WINDOWS XP. Diaktifkan dengan klik kanan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
 <HTML>
 <HEAD>
 <TITLE>Shadowy Tables</TITLE>
 <style>
 body {color:#FF0000;font-size:20}
 .menubar { border:1px solid #999999; width:250; height:120;background-color: #ffffdd; position:absolute; color:"black";}
 </style>
 <script language=javascript>
 
 var global = window.document
 global.shadows = new Array
 
 function ShowShadowMenu(el, color, depth)
 {
 var i;
 
 // Tidy up any previous shadows
 for (i=0; i<global.shadows.length; i++)
 global.shadows[i].removeNode(true);
 global.shadows = new Array();
 
 //place the menu where the mouse is and show it
 el.style.left = window.event.x
 el.style.top = window.event.y
 el.style.display = "block"
 
 //draw a series of cascading rectangles to create shadow
 for (i=depth; i>0; i--)
 {
 var rect = document.createElement('div');
 var rs = rect.style
 rs.position = 'absolute';
 
 //offset this shadow from the table
 rs.left = (el.style.posLeft + i) + 'px';
 rs.top = (el.style.posTop + i) + 'px';
 rs.width = el.offsetWidth + 'px';
 rs.height = el.offsetHeight + 'px';
 
 //put rectangle behind the table
 rs.zIndex = el.style.zIndex - i;
 rs.backgroundColor = color;
 
 //make the shadow transparent
 var opacity = 1 - i / (i + 1);
 rs.filter = 'alpha(opacity=' + (100 * opacity) + ')';
 
 //add shadow to document
 el.insertAdjacentElement('afterEnd', rect);
 
 //save this shadow for later removal
 global.shadows[global.shadows.length] = rect;
 }
 }
 
 function ok()
 {
 	TMenu.style.display="none";
 	var i;
 
 // Tidy up any previous shadows
 for (i=0; i<global.shadows.length; i++)
 global.shadows[i].removeNode(true);
 global.shadows = new Array();
 
 }
 function cancel()
 {
 	self.close();
 }
 </script>
 
 </HEAD>
 
 <BODY BGCOLOR="#FFFFFF" oncontextmenu="ShowShadowMenu(TMenu,'#999999',4); return false">
 <div style="width:250" onclick="ShowShadowMenu(TMenu,'#cccccc',4)">
 klik kanan
 </div>
 <TABLE class="menubar" id="TMenu" style="display:none;background-image:url('latar.bmp')" >
 <tbody>
 <TR>
 <TD valign=top style="height:20;background-image:url('latar2.bmp');padding:0;font:x-small Verdana;padding:2">Perhatian !!!</TD>
 </TR>
 <tr>
 <td valign=top style="font:xx-small Verdana">
 Penggunaan Klik Kanan akan menutup Window yang Anda buka!
 
 Ingin diteruskan ?
 </td>
 </tr>
 <tr>
 <td align=center valign=top>
 Ok   Cancel
 </td>
 </tr> 
 </tbody>
 </TABLE>
 </BODY>
 </HTML>

Teknologi 3D pada Halaman WEB

Sabtu, 06 Februari 2010

DIALOG BOX dengan EFFECT SHADOW

HAPUS KODE BR / pada script!

Tidak ada komentar:

Mengenai Saya