Create cool Web page Right-click menu two method

Menu | Web page in the General Web page, ie browser's default right button menu is a fixed mode, most users browse the Web when the use of it is not high. For professional web designers, if you can design the right button menu personalized content, the style of how cool and convenient.
Just imagine, the user in your site a little right button, is your carefully organized "link", "letter", even contains a colorful interactive Flash animation! such as Figure 1--don't drool, below we will solve Jiejie, see how to make it:).

Right-click the menu transformation, I have two ways (in fact, the essence is the same, are JavaScript things). The first method of

is earlier, copying the following source code into the HTML file in the Web page.　　

< 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"
& lt;!--Web Site: http://www.painting-effects.co.uk ;

<!--This script and many more are available free online at-->
<!--the JavaScript source!! http://javascript.internet.com -->

<!--Begin
var Menuskin = "Skin1"; Skin0, or Skin1
var display_url = 0; Show URL 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"
>
< div class= "MenuItems" Url= "Javascript:history.back ();" > Return </div>
< div class= "MenuItems" url= "http://javacool.3322.net"> Back Page </div>
< hr>
< div class= "MenuItems" url= "http://www.163.com"> NetEase </div>
< div class= "MenuItems" url= "http://www.sohu.com"> Sohu </div>
< hr>
< div class= "MenuItems" url= "http://www.sina.com.cn"> Sina </div>
< div class= "MenuItems" url= "http://www.yahoo.com.cn"> Yahoo </div>
</div>
< script language= "JavaScript1.2" >
if (document.all && window.print) {
Ie5menu.classname = Menuskin;
Document.oncontextmenu = SHOWMENUIE5;
Document.body.onclick = HIDEMENUIE5;
}
</script>
the effect of the following figure:

The second approach is to use a Dreamweaver plug-in--right_click_menu_buil-der that can behttp://www.macromedia.comDownload to get. After installation, you can find the right click menu Builder Command under the Command menu of Dreamweaver.
When you click the command, a Setup box appears as shown in Figure 3. There are two main parts: "Menu" and "Styles".

menu is set to function, hyperlinks, and send links are set here, where you can set up to 10 connections. In this selection box, "menu Text" is the text you want to display in your right key (for Chinese). Write the appropriate link path in URL, "Target" Determines whether it is a new window or displays the linked content with the current window, and the "Blank" is displayed in a new window. The "Target" setting for Dreamweaver is the same.

Styles is responsible for setting the menu profile, there are two options:
IMG src= "http://tech.china.com/zh_cn/netschool/homepage/167718/20020521/images/
11257823_63732.jpg ">
Windows Type menu is the default--the most down-to-earth, familiar Windows style;
Custom menu, if you choose this item, you should also set the following content:
"Menu Width", the width of the menus;
"Font", font;
"Font color", font colors;
"Font Side", font size;
"Background Color", "Background image", background scenery and image;
There is also "Cursor", which is used to select the mouse style.
These are all set up, you can point "Add" generation effect. A preview, right?

So how do you add flash? To do this: add a "Table" to the Web page, and its "W" width is set to: "100%", which will facilitate the positioning of the various elements you add below. OK, in the "Table" Insert Flash SWF file, the location is set to "center" (mainly convenient positioning, of course, specific problems specific analysis, I try to have some experience).

Tip: Flash animations can be made with interactive links, why? So you can add any number of hyperlinks. The plugin itself has a maximum of 10 restrictions, with flash can be all resolved! ^_^