鼠標在文本上移動時層的顯示與消失

2024-04-27 13:54:45

字體：大中小

來源：轉載

供稿：網友

花了兩天的時間才把這個簡單的東西給做出來。本來早就想做這個東西的，但是由于......(跟老板后面做事，當然空閑的時間就少了，唉，實在不好意思，因為自己不才，所以找了個借口)。剛好現在公司又讓我做個房產管理系統，要用這樣的一個方法了，所以才狠下心來非把這個做出來不可。我認為這個例子非常實用(個人看法)，而且好多大型網站上都有這種應用。今天寫下來和各位朋友一起分享。以下就是我的所有代碼，有不妥之處還請各位高人指教，在此先謝了。
　　把這里的所有代碼都放在<body>與</body>之間即可
<script language=javascript>


</script>
<div id=ab style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：園區星海街東側<br>電話：0512-65103588-206</div>

<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="150"><a href="#" onmouSEOut=hiddiv(); onmousemove=showdiv();>發現之旅</a></td>
</tr>
</table>

　　當然了這里的功能比較簡單，沒有對瀏覽器類型進行判斷，本人不才，就把這個問題留給各位了，歡迎每一位朋友來修改這個問題。
　　在這里還有一個問題就是如果文本不止一個、定義的層也就不止一個。如果還用這樣的方法就會出錯，我對這個問題研究了一下，用下面的這個方法就可以解決了。
<script language=Javascript>


</script>
<div id=ab style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：園區星海街東側<br>電話：0512-65103588-20611</div>

<div id=cd style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址：新區明星街南側<br>電話：0512-65103588-20622</div>

<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="150"><a href="#" onmouseout=hiddiv(ab); onmousemove=showdiv(ab);>發現之旅</a></td>
</tr>
<tr>
<td width="150"><a href="#" onmouseout=hiddiv(cd); onmousemove=showdiv(cd);>和風景苑</a></td>
</tr>
</table>

　　如果有更多的文本和層的話以此類推即可。
　　在這里有幾點要說明的就是：
　　1、showdiv中帶參數時再用document.all.ab.style.display=""就不適用了，關于這點朋友們可以參考有關書籍
　　2、onmouseover與onmousemove的區別是：當鼠標移過當前對象時就產生了onmouseover事件,當鼠標在當前對象上移動時就產生了onmousemove事件，只要是在對象上移動而且沒有移出對象的，就是onmousemove事件。我當前就是因為這個onmouseover事件惹的禍要不早就搞定了。今天寫出來讓朋友們也能注意這一點。
　　3、如果朋友們有更好的方法或有不明白的地方我們可以一起探討。
　　4、有需要的朋友可以直接拿去用，本人保留版權

上一篇：網頁制作中的小秘訣

下一篇：通向web標準之路