<html> |
02 | <head> |
03 | <title>link box</title> |
04 | <style> |
05 | #messageBox{ |
06 | border-right: 1px solid #000000; |
07 | position: absolute; |
08 | width: 217px; |
09 | height: 100px; |
10 | z-index: 1; |
11 | background-color: #C0C0C0; |
12 | border-style: solid; |
13 | border-width: 1px; |
14 | display:none; |
15 | } |
16 | #closeButt{ |
17 | width: 100%; |
18 | height: 10px; |
19 | z-index: 1; |
20 | cursor: pointer; |
21 | left: 0px; |
22 | top: 0px; |
23 | background-color: #808080; |
24 | } |
25 | #contents{ |
26 | width: 100%; |
27 | height: auto; |
28 | z-index: 2; |
29 | } |
30 | </style> |
31 | <script language="javascript"> |
32 | function show(obj,msg){ |
33 | messageBox.style.top=obj.offsetTop |
34 | messageBox.style.left=obj.offsetLeft+obj.offsetWidth+5 |
35 | contents.innerHTML=msg+"<p>"+obj.href |
36 | messageBox.style.display="block" |
37 | } |
38 | </script> |
39 | </head> |
40 |
41 | <body> |
42 |
43 | <p><a onmouseover="show(this,'this is my message#1')"href="http://www.google.com">link1: go to google</a></p> |
44 | <p><a onmouseover="show(this,'this is my message#2')"href="http://www.msn.com">link2: go to msn</a></p> |
45 | <p><a onmouseover="show(this,'this is my message#3')"href="http://www.dreamincode.com/">link3: go to DIC</a></p> |
46 |
47 | <div id="messageBox"> |
48 | <div onclick="messageBox.style.display='none'" id="closeButt">x Click to close</div> |
49 | <div id="contents"></div> |
50 | </div> |
51 | </body> |
52 | </html> |
<html> |
02 |
03 | <head> |
04 | <script> |
05 | function menu (whichMenu,whatState){ |
06 | if (document.getElementById) |
07 | {document.getElementById(whichMenu).style.visibility = whatState;} |
08 |
09 | else {document[whichMenu].visibility = whatState;} |
10 |
11 | } |
12 | function details(what){ |
13 | myInfo={"google":"the best search engin on the web","yahoo":"this is too","about":"good place to visit"} |
14 | detailsBox.innerHTML=myInfo[what] |
15 | } |
16 | </script> |
17 | </head> |
18 | <body> |
19 | <div id="search"> |
20 | <a onmouseover="details('google')" href="http://www.google.com/"target="_blank" class="menulink">Google</a> |
21 | <a onmouseover="details('yahoo')" href="http://www.yahoo.com/"target="_blank" class="menulink">Yahoo!</a> |
22 | <a onmouseover="details('about')" href="http://www.about.com/"target="_blank" class="menulink">About.com</a> |
23 | <a href="java script://" onmouseover="menu('search','hidden')"class="menulink">CLOSE</a> |
24 | </div> |
25 |
26 | <div id="detailsBox"></div> |
27 | </body> |
28 | </html> |
No comments:
Post a Comment