การทำให้เว็บเพจมีตรา กญ.ลอยลงมาจากขอบเว็บ แบบในเว็บที่กำลังดูอยู่นี่แหละ ทำไม่ยาก ถ้าใช้วิธี Copy โค้ดทั้งหมด ข้างล่างนี้ ไป Paste ไว้ใน Page Source โดย Paste ไว้ในส่วนของ Tage <body> นะครับ คือเอาไว้ตรงไหนก็ได้ที่อยู่หลัง <body> แต่อยู่ก่อน </body>
      ที่ต้องให้ใช้วิธี Copy ไป Paste ก็เพราะว่าพวก Code นี้ พิมพ์ผิดนิดเดียวก็อาจใช้ไม่ได้เลย และพิมพ์ยากด้วย ยาวก็ยาว อย่าพิมพ์เองเลยครับ Copy เลยดีกว่า
       แล้วอย่าลืม ต้อง Download หรือ Save ไฟล์ภาพตรา กญ. นี้ (ไฟล์นี้ชื่อ gsn3.gif) ไปไว้ใน Directory เดียวกับเว็บเพจด้วยนะครับ (ถ้าจะไว้ใน Sub Directory ก็ต้องแก้ Path ใน Code ให้ถูกต้องด้วย แก้เฉพาะตรงชื่อไฟล์ gsn3.gif
      ถ้าจะใช้ภาพอื่นก็ย่อมได้ อย่าลืมแก้ชื่อไฟล์ภาพใน Code ให้ตรงกันก็แล้วกัน ถ้าชื่อไฟล์ใช้ตัวอักษรพิมพ์เล็ก ใน Code ก็ต้องพิมพ์เล็กด้วย และภาพต้องมีขนาดเล็ก (ในตัวอย่างนี้ ขนาด 1.23 X 1.23 cm)

      เทคนิคนี้ สำหรับผู้ที่สนใจนะครับ อย่าลืมว่าการใช้ลูกเล่นมากก็อาจทำให้เว็บเรา Load ช้า แต่ถ้าไม่มีลูกเล่นเลย เว็บเราก็ไม่น่าสนใจ

<script language="JavaScript1.2">
<!-- Begin
var no = 14; // number of hearts
var speed = 10; // smaller number moves the hearts faster
var heart = "gsn3.gif";
var flag;
var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
amx = new Array();
amy = new Array();
stx = new Array();
sty = new Array();
flag = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-30)+10; // set position variables
yp[i] = Math.random()*doc_height;
amy[i] = 12+ Math.random()*20; // set amplitude variables
amx[i] = 10+ Math.random()*40;
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
flag[i] = (Math.random()>0.5)?1:0;
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(heart+ "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(heart+ "\" border=\"0\"></layer>");
}
} else
if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(heart+ "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(heart+ "\" border=\"0\"></div>");
}
}
}

function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
if (yp[i] > doc_height-50) {
xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);
yp[i] = 0;
flag[i]=(Math.random()<0.5)?1:0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
if (flag[i])
dx[i] += stx[i];
else
dx[i] -= stx[i];
if (Math.abs(dx[i]) > Math.PI) {
yp[i]+=Math.abs(amy[i]*dx[i]);
xp[i]+=amx[i]*dx[i];
dx[i]=0;
flag[i]=!flag[i];
}
document.layers["dot"+i].top = yp[i] + amy[i]*(Math.abs(Math.sin(dx[i])+dx[i]));
document.layers["dot"+i].left = xp[i] + amx[i]*dx[i];

}
setTimeout("snowNS()", speed);
}

function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
if (yp[i] > doc_height-50) {
xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
flag[i]=(Math.random()<0.5)?1:0;
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
if (flag[i])
dx[i] += stx[i];
else
dx[i] -= stx[i];
if (Math.abs(dx[i]) > Math.PI) {
yp[i]+=Math.abs(amy[i]*dx[i]);
xp[i]+=amx[i]*dx[i];
dx[i]=0;
flag[i]=!flag[i];
}

document.all["dot"+i].style.pixelTop = yp[i] + amy[i]*(Math.abs(Math.sin(dx[i])+dx[i]));
document.all["dot"+i].style.pixelLeft = xp[i] + amx[i]*dx[i];
}
setTimeout("snowIE()", speed);
}

if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End -->
</script>
      ถ้าผมอธิบายไม่เข้าใจ หรือทำไม่ได้ตรงไหน ถามเพิ่มเติมได้นะครับ หรือจะให้แนะนำเทคนิคอื่น ๆ อีกก็ได้ แต่โอกาสจะตอบมีประมาณ 10 % เพราะไม่ค่อยมีเวลา และเรื่องที่ถามผมอาจจะไม่ทราบ อย่างไรก็ถามไปแล้วกัน ถามหรือเสนอ ได้ที่หน้า "ชี้แนะ" ครับ
กลับหน้าหัวข้อ สรรสาระ
Hosted by www.Geocities.ws