开心网tooltip

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
  <TITLE> ToolTip</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
<style type="text/css">
*{padding:0; margin:0;}
.it3{background:#fff url(http://img1.kaixin001.com.cn/i/ccts_bg.gif) bottom repeat-x; border:1px solid #DD7870; color:#333;}
.box{background:url(http://img1.kaixin001.com.cn/i/bottom-left-w.gif) no-repeat left bottom;}
.box-outer{background:url(http://img1.kaixin001.com.cn/i/bottom-right-w.gif) no-repeat right bottom;}
.box-inner{background:url(http://img1.kaixin001.com.cn/i/top-left-w.gif) no-repeat left top;}
.box p{background:url(http://img1.kaixin001.com.cn/i/top-right-w.gif) no-repeat right top; padding-left:20px; padding-top:10px; padding-bottom:15px; padding-right:20px;margin:0;}
.box-t {background:url(http://img1.kaixin001.com.cn/i/bottom-left-t.gif) no-repeat left bottom; position:absolute; top:-8px; left:252px;}
.box-outer-t{background:url(http://img1.kaixin001.com.cn/i/bottom-right-t.gif) no-repeat right bottom;}
.box-inner-t{background:url(http://img1.kaixin001.com.cn/i/top-left-t.gif) no-repeat left top;}
.box-t p{background:url(http://img1.kaixin001.com.cn/i/top-right-t.gif) no-repeat right top; padding-left:20px; padding-top:10px; padding-bottom:15px; padding-right:10px; line-height:2em; margin:0;}
.box-t span{background:url(http://img1.kaixin001.com.cn/i/top-right-t.gif) no-repeat right top; padding:10px 20px; display:block;}
.hid{visibility:hidden;}
#main{width:90%;height:600px;top repeat-x;margin:0 auto;border-right:1px solid #bbb;border-left:1px solid #bbb;padding:39px auto;background:#ffffff;text-align:center;}
.it_s{display:table;padding:50px auto;width:150px;height:19px;}
.ce{width:610px;height:400px}
.zc2{float:left; width:222px; padding-left:8px; position:relative;}
.box-login {
background:url(http://img1.kaixin001.com.cn/i/top-login.gif) no-repeat  top left;width:362px; margin:0 auto;padding:0px 0;
}
.box-login p {
background:url(http://img1.kaixin001.com.cn/i/bottom-login.gif) no-repeat  bottom left;
padding-top:10px;
padding-right:20px;
padding-bottom:20px;
}

</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function tpFocus(){
document.getElementById("tp_tooltip").style.visibility=""
document.getElementById("tp_tooltip").innerHTML=document.getElementById("one").innerHTML;
}
function tpBlur(){
document.getElementById("tp_tooltip").style.visibility="hidden";
}
function afFocus(){
document.getElementById("two_tip").style.visibility=""
document.getElementById("two_tip").innerHTML=document.getElementById("two").innerHTML;
}
function afBlur(){
document.getElementById("two_tip").style.visibility="hidden";
}

function aeFocus(){
document.getElementById("three_tip").style.visibility=""
document.getElementById("three_tip").innerHTML=document.getElementById("three").innerHTML;
}
function aeBlur(){
document.getElementById("three_tip").style.visibility="hidden";
}
//-->
</SCRIPT>
</HEAD>

<BODY>

<div id="main">
<div class="ce">
<div class="hid">
<p>|</p><p>|</p><p>|</p><p>|</p><p>|</p><p>|</p>
</div >

<div id=three_tip style="text-align:center;"></div>
<div class="zc2">
birth:<input type="text" name="ae" id="ae" onfocus="aeFocus();" onblur="aeBlur();" ></input>
</div>

<div class="hid">
<p>|</p><p>|</p>
</div>
<div class="zc2">
Name:<input type="text" name="tp" id="tp" onfocus="tpFocus();" onblur="tpBlur();" ></input>
<div id=tp_tooltip></div>
</div>
<div class="hid">
<p>|</p><p>|</p>
</div>
<div class="zc2">
sex:<input type="text" id="af" onfocus="afFocus()" onblur="afBlur()"/>
<div id="two_tip"></div>
</div>
<div class="hid">
<p>|</p><p>|</p>
</div>

</div>
</div>






<div class="hid" id="one">
<div class="box-t" style="width: 25em;">
<div class="box-outer-t">
<div class="box-inner-t">
<p>输入您的姓名</p>
</div>
</div>
</div>
</div>

<div class="hid" id="two">
<div class="box" style="width: 15em; position: absolute; top: -8px; left: 252px;">
<div class="box-outer">
<div class="box-inner">
<p>输入您的姓名</p>
</div>
</div>
</div>


<div id="three" class="hid">
<div  class="box-login">
<p>这里输入您的提示信息~~<a href="a.com">a</a></p>
</div>

</div>
</BODY>
</HTML>


顺便问下着个算侵权吗?

你可能感兴趣的:(XHTML)