:: How to Build ::
- เตรียมข้อความไว้ในเลเยอร์ คุณจะเปลี่ยนเป็นภาพน่ารักๆแทนก็ได้นะครับ
<![CDATA[
<DIV ID="myDiv" STYLE="position:absolute;z-index:100px;">
Hello
</DIV>
]]>
- ตรวจสอบบราวเซอร์
<![CDATA[
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
]]>
- เพื่อให้ฟังก์ชั่นนี้จะถูกเรียกใช้โดยอัตโมัติเมื่อเวบโหลดเสร็จ คุณต้องใส่ onload="init()" ไว้ใน <BODY>มันจะกำหนดให้ฟังก์ชั่น mouseMove() ทำงาน
เมื่อเกิดอีเวนต์ onmousemove
<![CDATA[
function init() {
document.onmousemove = mouseMove
if (ns4) document.captureEvents(Event.MOUSEMOVE)
}
]]>
- ส่วนการทำงานในฟังก์ชั่น mouseMove() ก็แค่ย้ายเลเยอร์ไปที่ตำแหน่งเดียวกับ mouse เท่านั้น
ซึ่งการอ่านตำแหน่งมีรายละเอียดอยู่ในบทความ
"วิธีตรวจสอบตำแหน่งของ mouse ใน JavaScript"
<![CDATA[
function mouseMove(e) {
var x = (ns4)? e.pageX : event.x+document.body.scrollLeft
var y = (ns4)? e.pageY : event.y+document.body.scrollTop
moveTo('myDiv',x+10,y+10);
return true
}
]]>
- ส่วนฟังก์ชั่น moveTo() เป็นฟังก์ชั่นที่ใช้เคลื่อนย้ายเลเยอร์ไปยังตำแหน่งที่กำหนด มีรายละเอียดดังนี้
<![CDATA[
function moveTo(obj,x,y) {
if (ns4) {
document.layers[obj].left = x;
document.layers[obj].top = y;
}
if (ie4) {
document.all[obj].style.left = x;
document.all[obj].style.top = y;
}
]]>
|
