การทำ หมายเหตุ ให้แสดงขึ้นมาอย่างง่าย ๆ จัดทำโดย : เฟริสท์ พิมพ์
 Untitled Document การทำ หมายเหตุ อย่างง่าย ๆ เพื่อที่จะใช้อธิบายข้อความต่าง ๆ เกี่ยวกับสิ่งที่เราต้องการเพื่อที่จะให้ผู้ใช้ ทำความเข้าใจง่ายขึ้นทำข้อมูลที่ต้องกรอกให้มากขั้นนะครับ

ขั้นตอน 1:แทรก stylesheet และ Script นี้ ไปวางที่ Tag <head> </head>

<style type="text/css">

#hintbox{ /*กรอบคำอธิบาย */
position:absolute;
top: 0;
background-color: lightyellow;
width: 150px; /*เส้นขอบ*/
padding: 3px;
border:1px solid black;
font:normal 11px Verdana;
line-height:18px;
z-index:100;
border-right: 3px solid black;
border-bottom: 3px solid black;
visibility: hidden;
}

.hintanchor{ /*สีกรอบตอนเมาส์อยู่ด้านบน*/
font-weight: bold;
color: navy;
margin: 3px 8px;
}

</style>

<script type="text/javascript">

var horizontal_offset="9px" //ระยะห่างขาตำแหน่งของ ปุ่ม

var vertical_offset="0" //ไม่ต้องเปลี่ยน
var ie=document.all
var ns6=document.getElementById&&!document.all

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
if (whichedge=="rightedge"){
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
}
else{
var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
}
return edgeoffset
}

function showhint(menucontents, obj, e, tipwidth){
if ((ie||ns6) && document.getElementById("hintbox")){
dropmenuobj=document.getElementById("hintbox")
dropmenuobj.innerHTML=menucontents
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (tipwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=tipwidth
}
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
dropmenuobj.style.visibility="visible"
obj.onmouseout=hidetip
}
}

function hidetip(e){
dropmenuobj.style.visibility="hidden"
dropmenuobj.style.left="-500px"
}

function createhintbox(){
var divblock=document.createElement("div")
divblock.setAttribute("id", "hintbox")
document.body.appendChild(divblock)
}

if (window.addEventListener)
window.addEventListener("load", createhintbox, false)
else if (window.attachEvent)
window.attachEvent("onload", createhintbox)
else if (document.getElementById)
window.onload=createhintbox

</script>

ขั้นตอน 2: Copy Code ไปวางที่ Tag <body> </body> ในหน้างานของคุณ

<form>
<b>Username:</b> <input type="text" class="test" /> <a href="#" class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px')">[?]</a><br />
<b>Password:</b> <input type="text" class="test" /> <a href="#" class="hintanchor" onMouseover="showhint('Enter the desired password. <b>Must</b> be 8 characters or longer.', this, event, '200px')">[?]</a><br />
</form>


ข้อมูลจาก : http://www.dynamicdrive.com/dynamicindex16/showhint.htm

ตัวอย่าง

Username: [?]
Password: [?]
คุณอาจสนใจ
การแต่งภาพ ClipArt
หมูขุน (14,934 - 04 ก.พ. 50)
วิธีแฮกล็อกออนพาสเวิร์ดของวินโดวส์แบบง่าย ๆ
เว็บไทยดีดี (28,479 - 29 ก.ย. 50)
โหลด Windows แบบเร่งด่วน
เว็บไทยดีดี (16,232 - 26 ม.ค. 51)
เปลี่ยน Theme เว็บไซต์ง่ายสไตล์ Namo
Mr.GuruZ (31,369 - 08 มี.ค. 51)
การใช้งานเครื่องมือ Blur Tool
น้องฝ้าย (72,813 - 22 ก.ย. 50)
ความหมายของ static
Mr.POP (46,827 - 05 พ.ย. 49)
ลบ Help and Suport ออกจาก Start เมนูของคุณ XP
เว็บไทยดีดี (14,464 - 01 ก.ย. 50)
สร้างตาราง : Table
อ้อม (26,399 - 07 เม.ย. 50)