JavaScript打造网页右键菜单二法

　　在普通的网页中，IE阅读器的默许右键菜单是 至死不变的固定模式，大 部分网友阅读网页时对它的利用率不高 。对专业的网页设计师来说，假如能将右键菜单设计成个性化的内容该多好呀 。

　　试想一下，消费者在你的网站上丝毫右键，便是你精心组织的“链接”、“发信”，甚至包括了缤纷的交互式Flash动画！如图1——别流口水了，下面咱们就解解馋，看看如何制作吧 。

图1

　　右键菜单的革新，我有两种 路径(其实， 性质是一样的，都是JavaScript的东西) 。

　　第一种 步骤是较早的，把下列源代码复制到网页中HTML文件中即可 。

< style><p>< !--</P><p>.skin0 {</P><p>position:absolute;</P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/web/news/2023/12m88985.html" target=_blank > 从董宇辉到“东方小董”：超级带货主播的围城？ </a></td><td><a href="http://www.zhujiangroad.com/waishe/news/2021/8a17532.html" target=_blank > 手感是不是玄学？关于手感的二三事 </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/home/news/2021/2m82793.html" target=_blank > 记住这几个关键词 2021年买电视就看它们了 </a></td><td><a href="http://www.zhujiangroad.com/dc/news/2013/6a16377.html" target=_blank > 相机大百科 单反拍视频是趋势还是搞笑 </a></td></tr></table></div><p>text-align:left;</P><p>width:200px;</P><p>border:2px solid black;</P><p>background-color:menu;</P><p>font-family:Verdana;</P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/web/news/2020/4m81552.html" target=_blank > 三年败光一百多亿，那个为自己代言的陈欧，现在过得还好吗 </a></td><td><a href="http://www.zhujiangroad.com/web/news/2022/1m84531.html" target=_blank > 为了防摸鱼，全公司电脑Alt键一夜消失 </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/edu/soft/74873.html" target=_blank > win7系统中设置禁用/停止任务栏窗口自动移动方法图文教程介绍 </a></td><td><a href="http://www.zhujiangroad.com/edu/soft/77656.html" target=_blank > win7任务栏常用终极技巧小结(以备不时之需) </a></td></tr></table></div><p>line-height:20px;</P><p>cursor:default;</P><p>visibility:hidden;</P><p>}</P><p>.skin1 {</P><p>cursor:default;</P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/web/news/2021/8m83731.html" target=_blank > 百度怎么又被打回原型了？ </a></td><td><a href="http://www.zhujiangroad.com/game/news/2024/4m89810.html" target=_blank > 网易再牵暴雪的手，实际想搂微软的腰 </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/web/news/2020/7m81924.html" target=_blank > 美团偷偷扣款引热议，APP这么渣，让我们今后怎么一起玩耍？ </a></td><td><a href="http://www.zhujiangroad.com/software/news/2021/3m82957.html" target=_blank > 微软彻底删除Edge经典版！Edge经典版为何失败？ </a></td></tr></table></div><p>font:menutext;</P><p>position:absolute;</P><p>text-align:left;</P><p>font-family: Arial, Helvetica, sans-serif;</P><p>font-size: 10pt;</P><p>width:120px;</P><p>background-color:menu;</P><p>border:1 solid buttonface;</P><p>visibility:hidden;</P><p>border:2 outset buttonhighlight;</P><p>}</P><p>.menuitems {</P><p>padding-left:15px;</P><p>padding-right:10px;</P><p>}</P><p>--></P><p>< /style> </P><p>< SCRIPT LANGUAGE="JavaScript1.2"></P><p>< !-- Web Site: http://www.painting-effects.co.uk --></P><p>< !-- This script and many more are available free online at --></P><p>< !-- The JavaScript Source!! http://javascript.internet.com --></P><p>< !-- Begin</P><p>var menuskin = "skin1"; // skin0, or skin1</P><p>var display_url = 0; // Show URLs in status bar?</P><p>function showmenuie5() {</P><p>var rightedge = document.body.clientWidth-event.clientX;</P><p>var bottomedge = document.body.clientHeight-event.clientY;</P><p>if (rightedge < ie5menu.offsetWidth)</P><p>ie5menu.style.left = document.body.scrollLeft + event.clientX -</P><p>ie5menu.offsetWidth;</P><p>else</P><p>ie5menu.style.left = document.body.scrollLeft + event.clientX;</P><p>if (bottomedge < ie5menu.offsetHeight)</P><p>ie5menu.style.top = document.body.scrollTop + event.clientY -</P><p>ie5menu.offsetHeight;</P><p>else</P><p>ie5menu.style.top = document.body.scrollTop + event.clientY;</P><p>ie5menu.style.visibility = "visible";</P><p>return false;</P><p>}</P><p>function hidemenuie5() {</P><p>ie5menu.style.visibility = "hidden";</P><p>}</P><p>function highlightie5() {</P><p>if (event.srcElement.className == "menuitems") {</P><p>event.srcElement.style.backgroundColor = "highlight";</P><p>event.srcElement.style.color = "white";</P><p>if (display_url)</P><p>window.status = event.srcElement.url;</P><p>}</P><p>}</P><p>function lowlightie5() {</P><p>if (event.srcElement.className == "menuitems") {</P><p>event.srcElement.style.backgroundColor = "";</P><p>event.srcElement.style.color = "black";</P><p>window.status = "";</P><p>}</P><p>}</P><p>function jumptoie5() {</P><p>if (event.srcElement.className == "menuitems") {</P><p>if (event.srcElement.getAttribute("target") != null)</P><p>window.open(event.srcElement.url, event.srcElement.getAttribute("target"));</P><p>else</P><p>window.location = event.srcElement.url;</P><p>}</P><p>}</P><p>// End --></P><p>< /script></P><p>< div id="ie5menu" class="skin0" onMouseover="highlightie5()"</P><p>onMouseout="lowlightie5()" 　　onClick="jumptoie5();"></P><p>< div class="menuitems" url="javascript:history.back();">返回< /div></P><p>< div class="menuitems" url="http://javacool.3322.net">回忆页< /div></P><p>< hr></P><p>< div class="menuitems" url="http://www.163.com">网易< /div></P><p>< div class="menuitems" url="http://www.sohu.com">搜狐< /div></P><p>< hr></P><p>< div class="menuitems" url="http://www.sina.com.cn">新浪< /div></P><p>< div class="menuitems" url="http://www.yahoo.com.cn">雅虎< /div></P><p>< /div></P><p>< script language="JavaScript1.2"></P><p>if (document.all && window.print) {</P><p>ie5menu.className = menuskin;</P><p>document.oncontextmenu = showmenuie5;</P><p>document.body.onclick = hidemenuie5;</P><p>}</P><p>< /script></P>

　　其 动机如下图2:

图2

　　第二种 步骤是利用Dreamweaver的一个插件——Right_Click_Menu_Builder, 可以在www.macromedia.com下载得到 。安装后，可在Dreamweaver的“Command”菜单的下面找到“Right Click Menu Builder”命令 。

　　点击该命令，便浮现了一个如图3所示的设置框 。重要有两 部分内容：“Menu”和“Styles” 。

图3

　　Menu是设置 性能的，超级链接、发信链接都在这里设置，在这里最多 可以设10项衔接 。此 取舍框中“Menu Text”是你右键中将显示的文字(换成中文吧)；在“URL”中写入相应的链接路径；“Target”决定是不是是新窗口或是用现在的窗口 展示链接的内容，填入“Blank”便是在新窗口显示，和Dreamweaver的“Target”设置是一样的 。

　　那 怎么加入Flash呢？是这样做的：在网页中加一个“Table”，它的“W”宽 提议设为：“100%”，这样会容易你下面增加的各种元素的定位 。好，在该“Table”中插入Flash的SWF文件，位置设成“居中”(重要是容易定位，固然具体问题具体 综合，自己多尝试一下会有心得的) 。

　　小技巧：Flash动画 不妨做成有交互链接的那种，为何呢？这样你就 可以加任意数量的超级链接 。插件 本身有最多10条的 制约，用了Flash可就全解决啦!