Tech&Tip


ป้องกันการคลิกขวา

Code สำหรับป้องกันการคลิกขวาของคนเข้าเว็บ (ใช้ป้องกันได้ แต่ไม่ 100%) โดย Copy Code ด้านล่างนำไปวางระหว่าง <head> และ </head> ในเว็บของคุณ แล้วก็เปลี่ยนข้อความที่ท่านต้องการให้แจ้งเมื่อคลิกขวาตรงข้อความที่เป็นสี น้ำเงิน 
วิธี Copy ให้ใช้ Mouse ระบาย Code แล้วกด Ctrl+C เพื่อ Copy แล้ว Ctrl+V เพื่อวาง 
<script language="JavaScript">
<!--

var message="กำลังทำอะไร จ๊ะ"; // กำหนดตัวแปรและค่าสำหรับข้อความที่แสดงเมื่อมีการคลิกขวา
function click(e)
{
if (document.all) {
if (event.button == 2) {
alert(message);
return false; }
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
//-->
</script>


การทำ counter แบบตัวอักษร

      การทำ counter แบบตัวอักษร ที่สามารถแยกนับแต่ละหน้าเว็บได้ สำหรับผู้ที่ทำเว็บเพจ การใช้counter ฟรีที่มีให้บริการตามที่ต่าง ๆ ก็ดูสวยดี แต่หากต้องการที่จะทำการนับ จำนวนผู้ที่เข้าชม เว็บเพจของเราในแต่ละหน้าแยกจำนวนออกจากกัน จะทำอย่างไร พอดีไปเจอ CGI ทำ counter แบบง่าย ๆ และเห็นว่าน่าใช้งานดี เลยถือโอกาสนี้ นำมาฝากกัน ก็สำหรับผู้ที่ใช้โฮสต์แบบที่รองรับ CGI เช่นHypermart.net เท่านั้นนะครับ โดยผมได้นำมาจากhttp://www.utilmind.comซึ่งมีความสามารถพิเศษคือ เป็น counter แบบตัวเลขที่ทำงานโดยการเรียก CGI โดยไม่ต้องระบุอะไรมากนัก โปรแกรมจะทำการตรวจสอบชื่อของไฟล์ html ที่เรียกและสร้างฐานข้อมูลสำหรับการนับ พร้อมทั้งแสดงผลเป็นตัวเลขได้ทันที ดูตัวอย่างการทำงานได้ จากการนับ จำนวนผู้เข้าชม ในแต่ละหน้าที่ด้านล่างขวามือ นี่แหละครับ การใช้งานและติดตั้งก็ง่ายมาก ๆ โดยทำตามขั้นตอนต่อไปนี้

1. ดาวน์โหลด source code และทำการ unzip เก็บไว้ในโฟล์เดอร์ /cgi-bin/counter/
2. ไฟล์ข้างในจะประกอบด้วย
counter.cgi คือไฟล์ที่เป็น cgi สำหรับรัน
counter.txt คือไฟล์สำหรับเก็บข้อมูลการนับ
index.html คือตัวอย่างการใส่ code สำหรับการเรียก counter.cgi

3. ทำการ upload ทั้งหมดไปเก็บไว้ที่ Server ของ hypermart โดยใช้ FTP Program
4. ไฟล์ counter.cgi ขณะที่ Upload ต้องเลือก mode แบบ ASCII ด้วยและเปลี่ยน mode เป็น755 ก่อน
5. ที่หน้าเว็บเพจไหน หากต้องการทำการนับจำนวน ให้หาที่ว่าง ๆ ใส่ code นี้ลงไป
จำนวนผู้เข้าชม <!--#include virtual="/cgi-bin/counter/counter.cgi"--> ครั้ง
หรือดูตัวอย่างจากไฟล์ index.html ที่ดาวน์โหลดไปก็ได้
6. ตรวจสอบใน source code ของไฟล์ html ก่อนนะครับว่าไม่มีสัญญลักษณ์ต่าง ๆ ปะปนอยู่ด้วย
7. หลังจากนั้น โปรแกรมจะทำงานโดยอัตโนมัติเมื่อมีผู้เรียกดูหน้าเว็บเพจ โดยที่เราไม่ต้องระบุชื่อไฟล์html เลย
8. สามารถตรวจสอบจำนวนของ counter ได้โดยการเรียกดูไฟล์ /cgi-bin/counter/counter.txt



การทำภาพสไลด์

      1.การทำภาพสไลด์ต้องอาศัย โค้ดสองส่วนด้วยกันคือ java script ซึ่งเป็นส่วนควบการทำงานหลักของการสไลด์ภาพ และ CSS เป็นส่วนของการจัดรูปแบบในการนำเสนอภาพให้มีความสวยงามเหมาะสมตรงตามความต้องการที่ผู้จัดทำต้องการนำเสนอ
2.เตรียมรูปภาพที่ต้องการนำไปทำสไลด์  รูปภาพที่เราจะนำไปทำสไลด์นั้นควรมีขนาดของรูปภาพเท่ากันทุกรูป สิ่งนี้จำเป็นเพราะจะทำให้ภาพที่สไลด์ออกมานั้นมีความสวยงามสม่ำเสมอ และอีกอย่างที่จะต้องเตรียมก่อนทำภาพสไลด์นี้ก็คือ ไฟล์ ที่ควบคุมการทำงาน(Java Script) จำนวน 2 ไฟล์(jquery.js,easySlider1.7.js) และไฟล์ css 1 ไฟล์(screen.css)
3.เมื่อเตรียมสิ่งที่กล่าวมาในข้างต้นเรียบร้อยแล้ว เราก็ลงมือเขียนโค้ดได้เลย และในส่วนของการเขียนโค้ดลงไปนั้นจะมีอยู่สองส่วนด้วยกันคือ
   3.1เขียนโค้ดลงไปในส่วนของ Head (<Head> ...โค้ด... </Head>)ซึ่งเป็นส่วนของการกำหนดค่าการทำงานต่างๆ โดยโค้ดที่จะต้องนำไปเขียนไว้ในส่วนนี้ก็คือ
      การ import ไฟล์ CSS เข้ามา
<link href="../css/screen.css" rel="stylesheet"type="text/css" media="screen" />
    การ import ไฟล์ java script ที่เตรียมไว้เข้ามาใช้

 <script type="text/javascript" src="../js/jquery.js"></script>
<scripttype="text/javascript"src="../js/easySlider1.7.js"></script>
·       เขียนโค้ด java script เพิ่มเติมเพื่อสั่งให้มีการทำงาน โดยพิมพ์ตามด้านล่างนี้
<script type="text/javascript">
     $(document).ready(function(){            
     $("#slider").easySlider({
      auto: true, //ภาพสไลด์เองอัตโนมัติ(True)
      continuous: true,//การกำหนดให้มีการวนภาพซ้ำ(Repeat)
      numeric: true//เมื่อกดตัวเลขภาพจะสไลด์ตามลำดับตัวเลขนั้น
                   });
               });           
</script>
3.2เขียนโค้ดลงไปในส่วนของ body(<body>...โค้ด...</body>)เพื่อให้แสดงผล(ให้เขียนโค้ดตรงตำแหน่งตามที่ต้องการให้แสดงผล) โค้ดดังกล่าวดูไปจากด้านล่างนี้
<div id="container">
<div id="header">//กำหนดส่วนหัวของรูป
<h1>ข้อความที่เป็นห้วข้อของรูปที่สไลด์</h1>
 </div>
 <div id="content">
 <div id="slider">//ส่วนของภาพที่นำไปทำสไลด์
                <ul>                                                     
                 <li><a href="#ลิงค์"><img src="รูปที่1(image1.jpg)" alt="คำอธิบายแทนภาพ" /></a></li>
                 <li><a href="#ลิงค์"><img src="รูปที่2(image2.jpg)" alt="คำอธิบายแทนภาพ" /></a></li>                            .
                 </ul>
                 </div>
               </div>
</div>







ไม่มีความคิดเห็น:

แสดงความคิดเห็น