การทำ Spotlight effect จัดทำโดย : first พิมพ์
 Untitled Document

การทำ Spotlight effect

ขั้นตอน 1:
แทรก stylesheet นี้ลงใน Tag Head

<style>
<!--
#myimage{
filter:light
}
-->
</style>


ขั้นตอน 2: Copy Code ไปวางใน Tag Body ในหน้างานของคุณ

<img id="myimage" src="test.jpg"> //ใส่ชื่อรูปที่ต้องการ

<script language="JavaScript1.2">

s = 50; // กำหนดขนาด spotlight
vp = 10; // ความชัดของภาพที่โดน spotligh
startx = 0; // ตำแหน่งเริ่มต้น แกน X
starty = 0; //ตำแหน่งเริ่มต้น แกน Y

var IE = document.all?true:false

function moveL()
{
xv = tempX;
yv = tempY;
myimage.filters.light.MoveLight(1,xv,yv,s,true);
}

if (IE&&myimage.filters)
document.all.myimage.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0

function getMouseXY(e) {
tempX = event.offsetX
tempY = event.offsetY

if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{
moveL();
}

return true
}

var xv = startx;
var yv = starty;
var t= true;
if (IE&&myimage.filters){
myimage.style.cursor="hand";
myimage.filters.light.addAmbient(255,255,255,vp)
myimage.filters.light.addPoint(startx,starty,s,255,255,255,255)
}
</script>


ที่มา : http://www.dynamicdrive.com/dynamicindex4/spotlight.htm

ตัวอย่าง

คุณอาจสนใจ
วัตถุโพลีกอน 3 มิติ
Lee (67,586 - 01 ส.ค. 49)
สแปมเมอร์รู้ว่าเปิดเมล์แล้ว
เว็บไทยดีดี (15,501 - 01 มี.ค. 51)
การใส่ Movies
หมูขุน (25,470 - 04 ก.พ. 50)
มารู้จักการใช้งานฟีเจอร์ใหม่ๆ บน Adobe Photoshop CS (เวอร์ชัน 8) กันดีกว่า (ตอนที่ 1)
สุธีร์ นวกุล (37,718 - 06 ต.ค. 50)
วิธีป้องกันไวรัสโดยการเขียนไฟล์ autorun.inf ลงใน Handy Drive
เว็บไทยดีดี (73,217 - 25 ส.ค. 50)
การบันทึกเอกสาร เพื่อส่งไปยังแฟ้มข้อมูล
Mr.GuruZ (28,112 - 02 ก.ค. 49)
การวาดรูปโดยใช้เส้นอิสระ
หมูขุน (19,648 - 04 ก.พ. 50)
การสร้าง webboard ตอน 4 (แสดงกระทู้)
Mr.GuruZ (62,267 - 03 มิ.ย. 49)