Thaimisc.com : ทำการ X-RAY ข้อความที่ซ่อนไว้
ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us | Colocation | Web Hosting | เปิดร้านค้าฟรี


Category : Today's Tips Print Article Only Print Aticle With Comment
ทำการ X-RAY ข้อความที่ซ่อนไว้
เขียนโดย Poj , 16-07-2007
ทำการ X-RAY ข้อความที่ซ่อนไว้ หลักการคือเปลี่ยนสีของตัวอักษรที่ต้องการจะซ่อนให้เป็นสีเดียวกับสีพื้นหลังและไปตั้งค่าให้เวลานำ MOUSE ไปวางแล้วสีของตัวอักษรที่ซ่อนเปลี่ยนเป็นคนละสีกับสีพื้นหลังนั่นเองครับ ดูตัวอย่างได้ ที่นี่ ครับ

1.นำโค้ดส่วนนี้ไปใส่ไว้ใน <head>....</head> ครับ

<script language="javascript">
function mouseMove(e)
{
var x = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft;
var y = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop;
if(navigator.appName == 'Netscape' && e.target!=document) routeEvent(e);

Clip(Hidden, 0, y + 10, WindowWidth(), 60);

return(true);
}

function Clip(layer, x, y, w, h)
{
if(navigator.appName == 'Netscape')
{
if(parseInt(navigator.appVersion) == 5)
{
layer.style.clip = 'rect(' + y + ' ' + (x + w) + ' ' + (y + h) + ' ' + x + ')';
}
if(parseInt(navigator.appVersion) == 4)
{
layer.clip.left = x;
layer.clip.top = y;
layer.clip.right = x + w;
layer.clip.bottom = y + h;
}
}
else
{
layer.style.clip = 'rect(' + y + ' ' + (x + w) + ' ' + (y + h) + ' ' + x + ')';
}
}

function GetLayer(layer)
{
var ReturnLayer = null;
if(navigator.appName == 'Netscape')
{
if(parseInt(navigator.appVersion) == 5)
ReturnLayer = document.getElementById(layer);
else
eval('ReturnLayer = document.' + layer + ';');
}
else
{
eval('ReturnLayer = document.all.' + layer + ';');
}
return ReturnLayer;
}

function WindowWidth()
{
if(navigator.appName == 'Netscape')
return window.innerWidth;
else
return document.body.clientWidth;
}

function init()
{
document.onmousemove = mouseMove;
if(navigator.appName == 'Netscape') document.captureEvents(Event.MOUSEMOVE);

Hidden = GetLayer('back');
}
</script>



2.นำโค้ดส่วนนี้ไปใส่ไว้ใน <body>....</body> ครับ

<!-- หลักการคือ ในส่วน front ให้เปลี่ยนสีของข้อความที่จะซ่อนให้เป็นสีเดียวกับพื้นหลัง และ ในส่วน back ให้เปลี่ยนสีข้อความที่ซ่อนเป็นคนละสีกับพื้นหลัง -->

<!-- เริ่มต้น Code ตอนก่อนเอา MOUSE ไปวาง -->
<!-- แก้ไขตำแหน่งให้แสดงข้อความที่ top กับ left และขนาดที่ width กับ height ครับ -->
<div id="front" style="position:absolute;left:220px;top:90px; width:400; height:100;">

<table align="center" height="100%">
<tr>
<td width="600" height="100%" style="font-size:24pt;">
H<font color="#CCFFFF">idden Tex</font>t
H<font color="#CCFFFF">idden Tex</font>t
H<font color="#CCFFFF">idden Tex</font>t
H<font color="#CCFFFF">idden Tex</font>t
H<font color="#CCFFFF">idden Tex</font>t
H<font color="#CCFFFF">idden Tex</font>t
</td>
</tr>
</table>
</div>

<!-- เริ่มต้น Code ตอนหลังเอา MOUSE ไปวาง -->
<!-- แก้ไขตำแหน่งให้แสดงข้อความที่ top กับ left และขนาดที่ width กับ height ครับ (โดยทุกตัวจะต้องตรงกับชุดของข้างบนนะครับ-->
<div id="back" style="position:absolute;left:220px;top:90px; width:400; height:100;">

<table align="center" height="100%">
<tr>
<td width="600" height="100%" style="font-size:24pt;">
H<font color="#000000">idden Tex</font>t
H<font color="#000000">idden Tex</font>t
H<font color="#000000">idden Tex</font>t
H<font color="#000000">idden Tex</font>t
H<font color="#000000">idden Tex</font>t
H<font color="#000000">idden Tex</font>t

</td>
</tr>
</table>
</div>



3. เพิ่มโค้ดส่วนนี้ใน <body> ครับ

<body onload="init();">



Credit : codetukyang
<- Back | Next ->

ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us
Copyright 1999-2006 Thailand Miscellaneous. Allrights reserved. webmaster@thaimisc.com