打造超酷网页右键菜单二法
<P> 在一般的网页中，IE浏览器的默认右键菜单是一成不变的固定模式，大部分网友浏览网页时对它的利用率不高。对专业的网页设计师来说，如果能将右键菜单设计成个性化的内容，样式该是多么的酷和方便。 <BR> 试想一下，用户在你的网站上一点右键，就是你精心组织的“链接”、“发信”，甚至包含了缤纷的交互式Flash动画！如图1——别流口水了，下面咱们就解解馋，看看如何制作吧：)。<BR><IMG src="/bbs/attachments/websoft/20081206/200812611261767177801.jpg"></P><P> 右键菜单的改造，我有两种途径(其实，本质是一样的，都是JavaScript的东西)。<BR><BR> 第一种方法是较早的，把下列源代码复制到网页中HTML文件的中即可。<BR><FONT color=#3366cc><BR> < style><BR> < !--<BR> .skin0 {<BR> position:absolute;<BR> text-align:left;<BR> width:200px;<BR> border:2px solid black;<BR> background-color:menu;<BR> font-family:Verdana;<BR> line-height:20px;<BR> cursor:default;<BR> visibility:hidden;<BR> }<BR> .skin1 {<BR> cursor:default;<BR> font:menutext;<BR> position:absolute;<BR> text-align:left;<BR> font-family: Arial, Helvetica, sans-serif;<BR> font-size: 10pt;<BR> width:120px;<BR> background-color:menu;<BR> border:1 solid buttonface;<BR> visibility:hidden;<BR> border:2 outset buttonhighlight;<BR> }<BR> .menuitems {<BR> padding-left:15px;<BR> padding-right:10px;<BR> }<BR> --><BR> < /style></FONT><BR><FONT color=#3366cc> < SCRIPT LANGUAGE="JavaScript1.2"><BR> < !-- Web Site: http://www.painting-effects.co.uk --></FONT></P><P><FONT color=#3366cc> < !-- This script and many more are available free online at --><BR> < !-- The JavaScript Source!! http://javascript.internet.com --></FONT></P><P><FONT color=#3366cc> < !-- Begin<BR> var menuskin = "skin1"; // skin0, or skin1<BR> var display_url = 0; // Show URLs in status bar?<BR> function showmenuie5() {<BR> var rightedge = document.body.clientWidth-event.clientX;<BR> var bottomedge = document.body.clientHeight-event.clientY;<BR> if (rightedge < ie5menu.offsetWidth)<BR> ie5menu.style.left = document.body.scrollLeft event.clientX -<BR>ie5menu.offsetWidth; <BR> else<BR> ie5menu.style.left = document.body.scrollLeft event.clientX;<BR> if (bottomedge < ie5menu.offsetHeight)<BR> ie5menu.style.top = document.body.scrollTop event.clientY - <BR>ie5menu.offsetHeight;<BR> else<BR> ie5menu.style.top = document.body.scrollTop event.clientY;<BR> ie5menu.style.visibility = "visible";<BR> return false;<BR> }<BR> function hidemenuie5() {<BR> ie5menu.style.visibility = "hidden";<BR> }<BR> function highlightie5() {<BR> if (event.srcElement.className == "menuitems") {<BR> event.srcElement.style.backgroundColor = "highlight";<BR> event.srcElement.style.color = "white";<BR> if (display_url)<BR> window.status = event.srcElement.url;<BR> }<BR> }<BR> function lowlightie5() {<BR> if (event.srcElement.className == "menuitems") {<BR> event.srcElement.style.backgroundColor = "";<BR> event.srcElement.style.color = "black";<BR> window.status = "";<BR> }<BR> }<BR> function jumptoie5() {<BR> if (event.srcElement.className == "menuitems") {<BR> if (event.srcElement.getAttribute("target") != null)<BR> window.open(event.srcElement.url, event.srcElement.getAttribute("target"));<BR> else<BR> window.location = event.srcElement.url;<BR> }<BR> }<BR> // End --><BR> < /script><BR> < div id="ie5menu" class="skin0" onMouseover="highlightie5()" <BR>onMouseout="lowlightie5()" onClick="jumptoie5();"><BR> < div class="menuitems" url="javascript:history.back();">返回< /div><BR> < div class="menuitems" url="http://javacool.3322.net">回首页< /div><BR> < hr><BR> < div class="menuitems" url="http://www.163.com">网易< /div><BR> < div class="menuitems" url="http://www.sohu.com">搜狐< /div><BR> < hr><BR> < div class="menuitems" url="http://www.sina.c
页:
[1]