求箭头提示框源码

<div id=content1 class=content onmouseover="magnifier1_()" onmouseout="magnifier2_()">123</div>
function magnifier1_()
{
test.style.display="block";
}
function magnifier2_()
{
test.style.display="none";
}

汗，查看csdn的源代码就可以了

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2310">
<title>测试效果</title>
<style type="text/css">
body{font:62.5% Gulim,arial,sans-serif,verdana;height:100%;line-height:1.4em;margin:0;padding:0;}
table{margin:0 auto;border-collapse:collapse;}
td{text-align:center;padding:0;margin:0;}
form{margin:0;}
.bgp a,.bgp span{display:block;cursor:pointer;}
.bgp .bgp-fr{margin:0 auto;}
#wrapper{text-align:center;font-size:1.3em;}
a:link,a:active,a:visited{color:#444;text-decoration:none;}
a:hover{color:#0000CC;text-decoration:underline;}
#svc-toolbar{margin:2em auto 1.5em auto;}
#svc-toolbar .bgp-fr{width:52px;height:37px;margin-bottom:.5em;}
#svc-toolbar td{font-size:.9em;padding:0 .35em 0 .4em;}/*2*/
.ttm{position:absolute;font-size:1.2em;top:0;left:0;z-index:2;background:#fff;}
.ttl{margin:0 1px;height:1px;overflow:hidden;font-size:0;background-color:red;}
.ttc{text-align:center;border-left:1px solid red;border-right:1px solid red;}
.tt-text{margin:0 auto;white-space:nowrap;padding:.2em 0 0;}
.ttdc{height:1px;overflow:hidden;}
.ttdl,.ttdr{width:1px;height:1px;filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;float:left;}
.ttdr{float:right;}
.ttvc{height:4px;}
.ttv{position:relative;top:-1px;z-index:3;width:8px;height:4px;overflow:hidden;margin:0 auto;}/*1*/
#a1-i .bgp-fr{background-position:0 0;}
#a1-i:hover{color:#ea0000;}
#a1-i-tt .ttl,#a1-i-tt .ttdl,#a1-i-tt .ttdr{background-color:#ea0000;}
#a1-i-tt .ttc{border-color:#ea0000;}
#a1-i-tt .ttv{background-position:-364px 0px;}#a2-i .bgp-fr{background-position:0 -37px;}
#a2-i:hover{color:#0d53a4;}
#a2-i-tt .ttl,#a2-i-tt .ttdl,#a2-i-tt .ttdr{background-color:#0d53a4;}
#a2-i-tt .ttc{border-color:#0d53a4;}
#a2-i-tt .ttv{background-position:-364px -37px;}#a3-i .bgp-fr{background-position:0 -74px;}
#a3-i:hover{color:#878787;}
#a3-i-tt .ttl,#a3-i-tt .ttdl,#a3-i-tt .ttdr{background-color:#878787;}
#a3-i-tt .ttc{border-color:#878787;}
#a3-i-tt .ttv{background-position:-364px -74px;}#a4-i .bgp-fr{background-position:0 -111px;}
#a4-i:hover{color:#1da745;}
#a4-i-tt .ttl,#a4-i-tt .ttdl,#a4-i-tt .ttdr{background-color:#1da745;}
#a4-i-tt .ttc{border-color:#1da745;}
#a4-i-tt .ttv{background-position:-364px -111px;}#a5-i .bgp-fr{background-position:0 -148px;}
#a5-i:hover{color:#9e7eb9;}
#a5-i-tt .ttl,#a5-i-tt .ttdl,#a5-i-tt .ttdr{background-color:#9e7eb9;}
#a5-i-tt .ttc{border-color:#9e7eb9;}
#a5-i-tt .ttv{background-position:-364px -148px;}#a6-i .bgp-fr{background-position:0 -185px;}
#a6-i:hover{color:#ffb400;}
#a6-i-tt .ttl,#a6-i-tt .ttdl,#a6-i-tt .ttdr{background-color:#ffb400;}
#a6-i-tt .ttc{border-color:#ffb400;}
#a6-i-tt .ttv{background-position:-364px -185px;}#a7-i .bgp-fr{background-position:0 -222px;}
#a7-i:hover{color:#3aa4df;}
#a7-i-tt .ttl,#a7-i-tt .ttdl,#a7-i-tt .ttdr{background-color:#3aa4df;}
#a7-i-tt .ttc{border-color:#3aa4df;}
#a7-i-tt .ttv{background-position:-364px -222px;}
</style></head><body>
<div id="wrapper">
<table id="svc-toolbar" class="bgp" cellpadding="3" cellspacing="2" border="0">
<tr>
<td><a id="a1-i" href="#" title="a1"><span class="bgp-fr"></span>
<span>a1</span></a></td>
<td><a id="a2-i" href="##" title="a2"><span class="bgp-fr"></span>
<span>a2</span></a></td>
<td><a id="a3-i" href="###" title="a3"><span class="bgp-fr"></span>
<span>a3</span></a></td>
<td><a id="a4-i" href="####" title="a4"><span class="bgp-fr"></span>
<span>a4</span></a></td>
<td><a id="a5-i" href="#####" title="a5"><span class="bgp-fr">
</span><span>a5</span></a></td>
<td><a id="a6-i" href="######" title="a6"><span class="bgp-fr">
</span><span>a6</span></a></td>
<td><a id="a7-i" href="#######" title="a7"><span class="bgp-fr">
</span><span>a7</span></a></td>
</tr>
</table>
</div>


<div id="tt" class="ttm" style="display:none">
<div class="ttl">
</div>
<div class="ttc">
<div class="ttdc">
<div class="ttdl">
</div>
<div class="ttdr">
</div>
</div>
<div class="tt-text">
</div>
<div class="ttdc">
<div class="ttdl">
</div>
<div class="ttdr">
</div>
</div>
</div>
<div class="ttl">
</div>
<div class="ttvc">
<div class="ttv">
</div>
</div>
</div>

</body></html>

以上是HTML文件,JS太长了,贴不上来了

..............如果不介意..发邮箱也可以... [email protected]

仿google首页下端图片文字导航..你发给我的就是这个吗？你人很好谢谢了..但是你误解我的意思了....我要的不是 google 的那种..是 csdn 论坛的这种啊..带箭头的提示框..谢了

服了！！，无语，CSDN和GOOGLE的效果一样的，只是他们摆放的位置和样式不一样而已，其他的是一样的，都是带箭头的提示框

............唉......在 google 上找了N久之后..我已经找到了..你发的 google 的那个..我有..把网址发出来你去看下就知道我的意思了..http://www.beauscott.com/examples/help_balloons/doc/examples.htm给回复的人一些分..剩下的都给你..谢谢....

调试易

求箭头提示框源码

解决方案 »