Show Hint?
May 9, 2008 – 4:12 am
Show Hint Script มันก็คือตัวช่วยที่ทำให้ user เข้าใจการใช้งานโปรแกรมของเรา มากขึ้น เช่น แบบฟอร์มสมัครสมาชิก ซึ่งอาจจะมี text box หรือช่องกรอกข้อความหลายช่อง จึงทำให้ user สับสนว่า อันนี้เราต้องกรอกอะไรนะ? หรือว่า รูปแบบของข้อมูลที่เขาต้องกรอก ต้องเป็นแบบไหนนะ? ซึ่งเมื่อก่อนที่เราเคยทำเว็บที่ผ่านมา ก็อาจจะเขียนข้อความสั้นๆ ไว้หลังแบบฟอร์มว่าช่องนี้ให้กรอกอะไรเช่น เขียนไว้หลัง text box ช่องกรอกพาสเวิร์ดว่า ” *กรุณากรอกพาสเวิร์ด 6 ตัวอักษรขึ้นไป ” ประมาณนี้ แต่มันทำให้เปลืองพื้นที่ใช้งาน ดูรกหูรกตา ไม่สวยงาม และที่คัญคือ ไม่ทันสมัย!
วันนี้ผมมีสคริป ดีๆ ที่ช่วยทำให้เว็บของคุณดูทันสมัยมากยิ่งขึ้น ซึ่งเป็นเพียงแค่ Java Script สั้นๆ ที่ใช้ CSS ในการควบคุมรูปแบบการแสดงผล จึงทำให้เราสามารถเปลี่ยนรูปแบบการแสดงผลแบบไม่ซ้ำใคร ได้อย่างง่ายดายเลยทีเดียว คราวนี้ล่ะ เราจะได้มี Show hint เท่ๆ แบบที่เว็บเจ๋งๆ เขามีกัน
มาดูตัวอย่าง Show hint กันก่อน
ภาพ 1
รูปนี้คือแบบฟอร์มปรกติที่ผมทำการใส่ hint ลงไปแล้ว
จะสังเกตุได้จากลิงค์ [?] ซึ่งเมื่อเราทำเมาส์ไปชี้ ก็จะปรากฏ hint ที่เราได้ทำไว้
ดังภาพที่ 2
ภาพ 2
จากภาพเมื่อเราทำเมาส์ไปชี้ไว้บนลิงค์ [?] ซึ่งเราสามารถทำเป็นรูปภาพ
ตามที่เราต้องการได้ จะปรากฏ hint หรือตัวช่วยเหลือขึ้นมาเป็นกรอบ
ซึ่งเราสามารถกำหนดรูปแบบการแสดงผลได้จาก CSS
ทีนี้ เรามาเริ่มการทำ Show hint
ส่วนแรกคือ CSS ซึ่งเราสามารถเปลี่ยนสี หรือรูปแบบการแสดงผลต่างๆ ได้ที่นี่
<style type="text/css">
#hintbox{
position:absolute;
top: 0;
background-color: #ffe1f0;
width: 150px; /*Default width of hint.*/
padding: 3px;
border:1px solid #ff0080;
font:normal 11px Verdana;
line-height:18px;
z-index:100;
border-right: 1px solid #ff0080;
border-bottom: 1px solid #ff0080;
visibility: hidden;
}
.hintanchor{
font-weight: bold;
color: navy;
margin: 3px 8px;
}
</style>
นำไปใส่ไว้ในส่วนของ <head>…</head> ครับ
ต่อไปเป็นส่วนของ Java Script บ้าง ซึ่งเป็นส่วนสำคัญที่จะทำให้เราแสดงเอฟเฟคต่างๆได้
<script type="text/javascript">
/***********************************************
* Show Hint script- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var horizontal_offset="9px" //horizontal offset of hint box from anchor link
/////No further editting needed
var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
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>
ส่วน (Java Script) ก็ทำไปไว้ใน <head>…</head> เช่นกันครับ
หลังจากนั้นเราจึงสร้างฟอร์ม และกำหนดการแสดงผล ดังตัวอย่าง…
<form>
<b>Username:</b> <input type="text" class="test" /> <a href="#" class="hintanchor" onMouseover="showhint('กรุณากำหนดชื่อผู้ใช้ที่ต้องการ.', this, event, '150px')">[?]</a><br />
<b>Password:</b> <input type="text" class="test" /> <a href="#" class="hintanchor" onMouseover="showhint('กรุณากำหนดรหัสเข้าใช้งาน bra bra bra .', this, event, '200px')">[?]</a><br />
</form>
จากตัวอย่างการใช้งาน หากเราต้องการเพิ่ม text box หรือ ต้องการเพิ่ม hint หรือตัวช่วยเหลือไว้ที่อื่น เพียงแค่ทำลิงค์ หรือใช้รูปภาพ แล้วทำการ onMouseover เพื่อเรียกฟังก์ชั่น
showhint() แล้วกำหนดขนาด หรือคำที่ต้องการแสดงตามตัวอย่างได้เลยครับ …
จุดสำคัญก็คือ ตอนใช้งานต้องมีการเรียกใช้ฟังก์ชั่น showhint() เสมอ
เป็นยังไงบ้างครับ วิธีง่ายๆแค่นี้ ก็ทำให้เว็บเราดูทันสมัยขึ้นทันตาเลยล่ะ …
Leave a reply