The display and disappearance of the layer when the mouse moves on the text

Source: Internet
Author: User
Tags window
It took two days to get this simple thing done. Originally wanted to do this thing, but because ... (with the boss behind the work, of course, free time is less, alas, really embarrassed, because I am not, so find an excuse). Just now the company let me do a real estate management system, to use such a method, so it is hard to do this to make it. I think this example is very practical (personal), and many large Web sites have this application. Write it down today and share it with your friends. The following is all my code, there is a problem with the expert advice, thank you in the first place.


Put all the code here between <body> and </body>
<script language=javascript>
<!--
function Hiddiv ()
{
Document.all.ab.style.display= "None"
}
function Showdiv ()
{
Document.all.ab.style.display= ""
Document.all.ab.style.left=window.event.clientx+15
Document.all.ab.style.top=window.event.clienty
}
-->

</script>
<div id=ab style= "Position:absolute; width:126; height:27; Background-color:orange; Display:none; Left:11; Top:36 "> Address: East of Xinghai Street, Park <br> Tel:0512-65103588-206</div>

<table border= "0" cellpadding= "0" cellspacing= "0" width= ">"
<tr>
&LT;TD width= "><a" href= "#" Onmouseout=hiddiv (); Onmousemove=showdiv ();> Discovery Tour </a></td>
</tr>
</table>

Of course, the function here is relatively simple, did not judge the type of browser, I am not, I leave this question to you, and welcome every friend to revise this problem.

Another problem here is that if more than one text is defined, there is more than one layer. If you still use this method will be wrong, I have a look at this problem, with the following method can be solved.

<script language=javascript>
<!--
function Hiddiv (Blah)
{
Blah.style.display= "None"
}
function Showdiv (Blah)
{
Blah.style.display= ""
Blah.style.left=window.event.clientx+15
Blah.style.top=window.event.clienty
}
-->

</script>
<div id=ab style= "Position:absolute; width:126; height:27; Background-color:orange; Display:none; Left:11; Top:36 "> Address: East of Xinghai Street, Park <br> Tel:0512-65103588-20611</div>

<div id=cd style= "Position:absolute; width:126; height:27; Background-color:orange; Display:none; Left:11; Top:36 "> Address: The south side of Star Street <br> Tel:0512-65103588-20622</div>

<table border= "0" cellpadding= "0" cellspacing= "0" width= ">"
<tr>
&LT;TD width= "><a" href= "#" Onmouseout=hiddiv (AB); Onmousemove=showdiv (AB);> Discovery Tour </a></td>
</tr>
<tr>
&LT;TD width= "><a" href= "#" Onmouseout=hiddiv (CD); Onmousemove=showdiv (CD);> and Landscape </a></td>
</tr>
</table>

And so on if you have more text and layers.
Here are a few points to explain:
1, showdiv with parameters and then use document.all.ab.style.display= "" is not applicable, on this point friends can refer to the books
3. The difference between onmouseover and onmousemove is that the onmouseover event occurs when the mouse moves over the current object, and the OnMouseMove event occurs when the mouse moves on the current object, as long as the object is moved and the object is not moved. is the onmousemove event. I am now because of this onmouseover incident caused by the disaster or already done. Write it today so that friends can also pay attention to it.
4, if friends have a better way or there is no understanding of where we can explore together.
5, the need for friends can be used directly to use, I reserve the copyright



Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.