JavaScript打造網頁右鍵菜單二法_主頁制作_網上學園_科技時代

JavaScript打造網頁右鍵菜單二法 2002/09/03 13:59 5D多媒體

  文/realrocking 

  在一般的網頁中,IE瀏覽器的默認右鍵菜單是一成不變的固定模式,大部分網友瀏覽網頁時對它的利用率不高。對專業的網頁設計師來說,如果能將右鍵菜單設計成個性化的內容該多好呀。

  試想一下,用戶在你的網站上一點右鍵,就是你精心組織的“鏈接”、“發信”,甚至包含了繽紛的交互式Flash動畫!如圖1――別流口水了,下面偺們就解解嚵,看看如何制作吧。

圖1

  右鍵菜單的改造,我有兩種途徑(其實,本質是一樣的,都是JavaScript的東西)。

  第一種方法是較早的,把下列源代碼復制到網頁中HTML文件中即可。

< style>
< !–
.skin0 {
position:absolute;
text-align:left;
width:200px;
border:2px solid black,網頁設計 台北;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden;
}
.skin1 {
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
width:120px;
background-color:menu;
border:1 solid buttonface;
visibility:hidden;
border:2 outset buttonhighlight;
}
,網站設計.menuitems {
padding-left:15px;
padding-right:10px;
}
–>
< /style>

< SCRIPT LANGUAGE="JavaScript1.2">
< !– Web Site: –>

< !– This script and many more are available free online at –>
< !– The JavaScript Source!! –>

< !– Begin
var menuskin = "skin1"; // skin0, or skin1
var display_url = 0; // Show URLs in status bar?
function showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge <,台北網頁設計; ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX –
ie5menu.offsetWidth;
else
ie5menu.style.left = document.body.scrollLeft + event.clientX;
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY –
ie5menu.offsetHeight;
else
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5() {
ie5menu.style.visibility = "hidden";
}
function highlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
if (display_url)
window.status = event.srcElement.url;
}
}
function lowlightie5() {
if (event.srcElement,網頁設計超值特惠方案.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
window.status = "";
}
}
function jumptoie5() {
if (event.srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url,民宿訂房系統, event.srcElement.getAttribute("target"));
else
window.location = event.srcElement.url;
}
}
// End –>
< /script>
< div id="ie5menu" class="skin0" onMouseover="highlightie5()"
onMouseout="lowlightie5()"   onClick="jumptoie5();">
< div class="menuitems" url="javascript:history.back();">返回< /div>
< div class="menuitems" url="">回首頁< /div>
< hr>
< div class="menuitems" url="">網易< /div>
< div class="menuitems" url="">搜狐< /div>
< hr>
< div class="menuitems" url="">新浪< /div>
< div class="menuitems" url="">雅虎< /div>
< /div>
< script language="JavaScript1.2">
if (document.all && window.print) {
ie5menu.className = menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}

< /script>

  其傚果如下圖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可就全解決啦!

【發表評論】【初學者園地】【科技聊天】【關閉窗口】 相关的主题文章: