摘要:右鍵選單
CSS語法
<style type="text/css">
A:link
{
color: #007500;
text-decoration: none;
}
A:visited
{
color: #007500;
text-decoration: none;
}
A:hover
{
color: #800080;
text-decoration: none;
}
#ie5menu { BACKGROUND-COLOR: #d6e7e7; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; CURSOR: default; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; LINE-HEIGHT: 17px; POSITION: absolute; VISIBILITY: hidden; WIDTH: 120px}
.menuitems { PADDING-LEFT: 15px; PADDING-RIGHT: 15px}
</style>
JavaScript語法
<script type="text/javascript" language="JavaScript">
var display_url = 0
//顯示右鍵選單
function showmenuie5() {
var menuWidth = 125;
var menuHeight = 335;
if (screen.availHeight >= (event.clientY + menuHeight) && screen.availWidth >= (event.clientX + menuWidth)) {
ie5menu.style.left = event.clientX + 'px';
ie5menu.style.top = event.clientY + 'px';
}
else if (screen.availHeight < (event.clientY + menuHeight) && screen.availWidth >= (event.clientX + menuWidth)) {
ie5menu.style.left = event.clientX + 'px';
ie5menu.style.top = event.clientY - 183 + 'px';
}
else if (screen.availHeight >= (event.clientY + menuHeight) && screen.availWidth < (event.clientX + menuWidth)) {
ie5menu.style.left = screen.availWidth - 125 + 'px';
ie5menu.style.top = event.clientY + 'px';
}
else {
ie5menu.style.left = screen.availWidth - 125 + 'px';
ie5menu.style.top = event.clientY - 183 + 'px';
}
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 == 1)
window.status = event.srcElement.url
}
}
function lowlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "#D6E7E7" //當滑鼠移至別的項目或是移出選單時背景顏色恢復
event.srcElement.style.color = "black"//當滑鼠移至別的項目或是移出選單時字體顏色恢復
//window.status=''
}
}
function jumptoie5() {
if (event.srcElement.className == "menuitems")
window.location = event.srcElement.url //取得觸發事件的網址
}
document.oncontextmenu = showmenuie5 //委派滑鼠右鍵事件
//if (document.all && window.print)
document.onclick = hidemenuie5 //委派滑鼠左鍵事件
</script>
HTML語法
<div id="ie5menu" onclick="jumptoie5();" onmouseout="lowlightie5();" style="visibility: hidden;"
onmouseover="highlightie5();">
<div class="menuitems" url="http://www.ltyschool.edu.hk">
劉德容紀念小學</div>
<div class="menuitems" url="http://www.yahoo.com.hk">
Yahoo</div>
<div class="menuitems" url="http://www.sina.com.hk">
新浪網</div>
<hr />
<div class="menuitems" url="javascript:history.go(-1)">
上 一 頁</div>
<div class="menuitems" url="javascript:history.go(1)">
下 一 頁</div>
<div class="menuitems" url="www.yahoo.com.hk">
回到首頁</div>
<div class="menuitems" url="mailto:ltytss@yahoo.com.hk">
寫信給我</div>
<div class="menuitems" url="javascript:print()">
列印本頁</div>
<div class="menuitems" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.ltyschool.edu.hk');"
url="javascript:history.go(0)">
設為首頁</div>
<div class="menuitems" onclick="window.external.addFavorite('http://www.ltyschool.edu.hk','劉德容紀念小學') ;"
url="javascript:history.go(0)">
加入我的最愛</div>
</div>