tip help--js带箭头的提示框
<!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>Form field hints with CSS and JavaScript</title>????
<style type="text/css">
<!--?????
/* All form elements are within the definition list for this example */???
dl {????
?font:normal 12px/15px Arial;????
??? position: relative;????
??? width: 350px;????
}????
dt {????
??? clear: both;????
??? float:left;????
??? width: 130px;????
??? padding: 4px 0 2px 0;????
??? text-align: left;????
}????
dd {????
??? float: left;????
??? width: 200px;????
??? margin: 0 0 8px 0;????
??? padding-left: 6px;????
}????
/* The hint to Hide and Show */???
.hint {????
??? display: none;????
??? position: absolute;????
??? right: -250px;????
??? width: 200px;????
??? margin-top: -4px;????
??? border: 1px solid #c93;????
??? padding: 10px 12px;????
??? /* to fix IE6, I can't just declare a background-color,??
??? I must do a bg image, too!? So I'm duplicating the pointer.gif??
??? image, and positioning it so that it doesn't show up??
??? within the box */???
??? background: #ffc url("http://www.cssrain.cn/demo/formfieldhints/pointer.gif") no-repeat -10px 5px;????
}????
/* The pointer image is hadded by using another span */???
.hint .hint-pointer {????
??? position: absolute;????
??? left: -10px;????
??? top: 5px;????
??? width: 10px;????
??? height: 19px;????
??? background: url("http://www.cssrain.cn/demo/formfieldhints/pointer.gif") left top no-repeat;????
}????
-->
</style>
<style type="text/css" mce_bogus="1">????
/* All form elements are within the definition list for this example */???
dl {????
?font:normal 12px/15px Arial;????
??? position: relative;????
??? width: 350px;????
}????
dt {????
??? clear: both;????
??? float:left;????
??? width: 130px;????
??? padding: 4px 0 2px 0;????
??? text-align: left;????
}????
dd {????
??? float: left;????
??? width: 200px;????
??? margin: 0 0 8px 0;????
??? padding-left: 6px;????
}????
/* The hint to Hide and Show */???
.hint {????
??? display: none;????
??? position: absolute;????
??? right: -250px;????
??? width: 200px;????
??? margin-top: -4px;????
??? border: 1px solid #c93;????
??? padding: 10px 12px;????
??? /* to fix IE6, I can't just declare a background-color,??
??? I must do a bg image, too!? So I'm duplicating the pointer.gif??
??? image, and positioning it so that it doesn't show up??
??? within the box */???
??? background: #ffc url("http://www.cssrain.cn/demo/formfieldhints/pointer.gif") no-repeat -10px 5px;????
}????
/* The pointer image is hadded by using another span */???
.hint .hint-pointer {????
??? position: absolute;????
??? left: -10px;????
??? top: 5px;????
??? width: 10px;????
??? height: 19px;????
??? background: url("http://www.cssrain.cn/demo/formfieldhints/pointer.gif") left top no-repeat;????
}??
</style>????
<script type="text/javascript"><!--?
????
function addLoadEvent(func) {????
? var oldonload = window.onload;????
? if (typeof window.onload != 'function') {????
??? window.onload = func;????
? } else {????
??? window.onload = function() {????
????? oldonload();????
????? func();????
??? }????
? }????
}????
function prepareInputsForHints() {????
?var inputs = document.getElementsByTagName("input");????
?for (var i=0; i<inputs.length; i++){????
? // test to see if the hint span exists first????
? if (inputs[i].parentNode.getElementsByTagName("span")[0]) {????
?? // the span exists!? on focus, show the hint????
?? inputs[i].onfocus = function () {????
??? this.parentNode.getElementsByTagName("span")[0].style.display = "inline";????
?? }????
?? // when the cursor moves away from the field, hide the hint????
?? inputs[i].onblur = function () {????
??? this.parentNode.getElementsByTagName("span")[0].style.display = "none";????
?? }????
? }????
?}????
?// repeat the same tests as above for selects????
?var selects = document.getElementsByTagName("select");????
?for (var k=0; k<selects.length; k++){????
? if (selects[k].parentNode.getElementsByTagName("span")[0]) {????
?? selects[k].onfocus = function () {????
??? this.parentNode.getElementsByTagName("span")[0].style.display = "inline";????
?? }????
?? selects[k].onblur = function () {????
??? this.parentNode.getElementsByTagName("span")[0].style.display = "none";????
?? }????
? }????
?}????
}????
addLoadEvent(prepareInputsForHints);????
// --></script>????
</head>????
<body>????
<p style="font:normal 12px/15px Arial;" mce_style="font:normal 12px/15px Arial;">Tab or click through the fields to reveal the hints.</p>????
<dl>????
?<dt>????
? <label for="firstname">First Name:</label>????
?</dt>????
?<dd>????
? <input name="firstname" id="firstname" type="text" />????
? <span id="lastname" type="text" />????
? <span id="email" type="text" />????
? <span name="year">????
?? <option value="">YYYY</option>????
?? <option value="1066">1066</option>????
?? <option value="1492">1492</option>????
?? <option value="1776">1776</option>????
?? <option value="1812">1812</option>????
?? <option value="1917">1917</option>????
?? <option value="1942">1942</option>????
?? <option value="1999">1999</option>????
? </select>????
? <span />????
? <span id="password" type="password" />????
? <span value="Submit" />????
?</dd>????
</dl>????
</body>????
</html>??
