console
function go() {
location = document.forms[0].gowhere.value
}
function showmenu(elmnt) {
document.getElementById(elmnt).style.visibility = "visible"
}
function hidemenu(elmnt) {
document.getElementById(elmnt).style.visibility = "hidden"
}
function gettip(txt) {
document.getElementById('tip').innerHTML = txt
}
function reset() {
document.getElementById('tip').innerHTML = " "
}
function gettips(image)
{
document.getElementById('tips').innerHTML="<img src='" + image + "' />"
}
function resets()
{
document.getElementById('tips').innerHTML=" "
}
function cursor(text){
trail.innerHTML=text
trail.style.visibility="visible"
trail.style.position="absolute"
trail.style.left=event.clientX+10
trail.style.top=event.clientY
}
function hidecursor(){
trail.style.visibility="hidden"
}
function cursor2(img){
trail2.innerHTML="<img src='" + img + "' />"
trail2.style.visibility="visible"
trail2.style.position="absolute"
trail2.style.left=event.clientX+10
trail2.style.top=event.clientY
}
function hidecursor2(){
trail2.style.visibility="hidden"
}
var i=-135
var intHide
var speed=3
function showmenu()
{
clearInterval(intHide)
intShow=setInterval("show()",10)
}
function hidemenu()
{
clearInterval(intShow)
intHide=setInterval("hide()",10)
}
function show()
{
if (i<-12)
{
i=i+speed
document.getElementById('myMenu').style.left=i
}
}
function hide()
{
if (i>-135)
{
i=i-speed
document.getElementById('myMenu').style.left=i
}
}
<form>
<select id="gowhere" onchange="go()">
<option>
-Select location-
</option>
<option value="http://baidu.com">
百度
</option>
<option value="https://codepen.io/">
CodePen
</option>
<option value="http://jsrun.pro/">
JSRun在线编辑器
</option>
</select>
</form>
<br />
<table width="100%">
<tr bgcolor="#FF8080">
<td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
<a href="http://baidu.com">
网址
</a>
<br />
<table class="menu" id="tutorials" width="120">
<tr>
<td class="menu">
<a href="http://baidu.com">
baidu
</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="https://codepen.io/">
CodePen
</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="http://jsrun.pro/">
JSRun在线编辑器
</a>
</td>
</tr>
</table>
</td>
<td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
<a href="http://baidu.com">
网址
</a>
<br />
<table class="menu" id="scripting" width="120">
<tr>
<td class="menu">
<a href="http://baidu.com">
baidu
</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="https://codepen.io/">
CodePen
</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="http://jsrun.pro/">
JSRun在线编辑器
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table width="400px">
<tr>
<th>
<a href="http://www.w3school.com.cn" onmouseover="gettip('W3School is the best Web Developers resource on the Web')"
onmouseout="reset()">
W3School.com.cn
</a>
</th>
<td rowspan="3" id="tip">
</td>
</tr>
<tr>
<th>
<a href="http://www.microsoft.com" onmouseover="gettip('Internet Explorer is winning the browser war')"
onmouseout="reset()">
Internet Explorer
</a>
</th>
</tr>
<tr>
<th>
<a href="http://my.netscape.com" onmouseover="gettip('The Navigator is Netscapes browser tribute to web surfers')"
onmouseout="reset()">
Netscape Navigator
</a>
</th>
</tr>
</table>
<br />
<table width="400px">
<tr>
<th>
<a href="/index.html"
onmouseover="gettips('https://www.w3school.com.cn/i/w3school_logo_black.gif')"
onmouseout="resets()">W3School.com.cn</a>
</th>
<td rowspan="3" id="tips" align="center" valign="center"> </td>
</tr>
<tr>
<th>
<a href="http://www.microsoft.com"
onmouseover="gettips('https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31')"
onmouseout="resets()">Internet Explorer</a>
</th>
</tr>
<tr>
<th>
<a href="http://my.netscape.com"
onmouseover="gettips('http://my.netscape.com/favicon.ico')"
onmouseout="resets()">Netscape Navigator</a>
</th>
</tr>
</table>
<br />
<a href="http://my.netscape.com/favicon.ico" class="cursorA" onmousemove="cursor('访问 Netscape Navigator')" onmouseout="hidecursor()">Netscape Navigator</a><br />
<a href="http://www.altavista.com" class="cursorA" onmousemove="cursor('转到 AltaVista')" onmouseout="hidecursor()">AltaVista</a><br />
<a href="http://www.yahoo.com" class="cursorA" onmousemove="cursor('使用 Yahoo 进行搜索!')" onmouseout="hidecursor()">Yahoo!</a>
<span id="trail" style="visibility:hidden">Hello</span>
<br />
<div style="position: relative;">
<a href="/index.html" onmousemove="cursor2('https://www.w3school.com.cn/i/w3school_logo_white.gif')" onmouseout="hidecursor2()">W3School.com.cn</a><br />
<a href="http://www.altavista.com" onmousemove="cursor2('https://www.w3school.com.cn/i/eg_altavistalink.gif')" onmouseout="hidecursor2()">AltaVista</a><br />
<a href="http://www.yahoo.com" onmousemove="cursor2('https://www.w3school.com.cn/i/eg_yahoo.gif')" onmouseout="hidecursor2()">Yahoo!</a><br />
<div id="trail2" style="visibility:hidden">Hello</div>
</div>
<table id="myMenu" class="myMenu" width="150" onmouseover="showmenu()" onmouseout="hidemenu()">
<tr>
<td class="menu"><a href="/index.html">HOME</a></td>
<td rowspan="5" align="center" bgcolor="#FF8080">M<br />E<br />N<br />U</td>
</tr>
<tr>
<td class="menu"><a href="/asp/index.asp">ASP</a></td>
</tr>
<tr>
<td class="menu"><a href="/js/index.asp">JavaScript</a></td>
</tr>
<tr>
<td class="menu"><a href="/dhtml/index.asp">DHTML</a></td>
</tr>
<tr>
<td class="menu"><a href="/vbscript/index.asp">VBScript</a></td>
</tr>
</table>
body {
font-family: arial;
}
a {
color: black;
text-decoration: none;
font: bold
}
a:hover {
color: #606060
}
td.menu {
background: lightblue
}
table.menu {
font-size: 100%;
position: absolute;
visibility: hidden;
}
table {
background: black;
}
a {
text-decoration: none;
color: #000000;
}
th {
width: 180px;
background: #FF8080;
}
td {
font: bold;
background: #ADD8E6;
}
.cursorA{
color: #afafaf;
}
body{font-family:arial;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.myMenu
{
background:black;
position:relative;
font: bold 80% arial;
top:0px;
left:-135px;
}