การใส่ Emotion ใส่ในเว็บบอร์ด จัดทำโดย : Zerohate
สำหรับเพื่อนที่ต้องการเพิ่้มลูกเล่นให้กับเว็บบอร์ดของตัวเอง วันนี้ผมมีลูกเล่นที่เรียกว่า emotion มาแนะนำครับ

ขั้นตอนการเขียน

1.สร้างฟอร์มสำหรับตอบเว็บบอร์ดก่อนนะครับ



2.เพิ่มโค๊ต java script เพื่อใช้งานตัวอีโมชั่น เข้าไปในส่วนของ <head></head>

<script type="text/JavaScript">
function setsmile(what) {
document.emotion.messages.value = document.emotion.elements.messages.value+" "+what;
document.emotion.messages.focus();
}
</script>


3.เรียกใช้งาน function setsmile โดยกำหนดไปในทุกรูปของอีโมชั่น ดังตัวอย่างเช่น onClick="setsmile(':1:')" สัญลักษณ์ในวงเล็บอย่าให้ซ้ำกันนะครับ แต่เพื่อให้ง่ายต่อการใช้งาน ก็ให้ใส่ไปตัวเลขแรงไปเรื่อยๆก็ได้

<a href="javascript:;" onClick="setsmile(':1:')"><img src="emotion/1.gif" width="20" height="20" border="0"></a>
<a href="javascript:;" onClick="setsmile(':2:')"><img src="emotion/2.gif" width="20" height="20" border="0"></a>
<a href="javascript:;" onClick="setsmile(':3:')"><img src="emotion/3.gif" width="20" height="20" border="0"></a>
<a href="javascript:;" onClick="setsmile(':4:')"><img src="emotion/4.gif" width="20" height="20" border="0"></a>
<a href="javascript:;" onClick="setsmile(':5:')"><img src="emotion/5.gif" width="20" height="20" border="0"></a>


4.สร้างตัวแปล action ชนิด hidden เพื่อเก็บค่า Add เพราะเราจะใช้ตัวแปลนี้ เพื่อนำไปเช็คตอน sumbit เพื่อบันทึกข้อมูล ใส่ไว้ส่วนไหนก็ได้นะครับ ขอให้อยู่ใน form

<input name="action" type="hidden" value="Add">

5.เขียน php เพื่อรับค่าสัญลักษณ์ จากนั้นเรามาเปลี่ยนเป็นรูปภาพ เพื่อนำไปใช้งานต่อไป อาจจะนำไปลงฐานข้อมูลก็ได้

<?
if($action ==
"Add") {
$txt = array(":1:", ":2:",":3:", ":4:", ":5:");
$pic = array("1.gif","2.gif","3.gif","4.gif","5.gif");
for
($i=0 ; $i<sizeof($txt) ; $i++) {
$messages = eregi_replace($txt[$i],"<img src=\"emotion/$pic[$i]\">",$messages);
}
}
?>

อาจจะยุ่งยากไปหน่อยนะครับ ถ้าไม่ได้่ลองโหลด Source code ทั้งหมดไปใช้งาน แล้วค่อยแก้เองก็ได้ครับ ^^

Download Source Code
คุณอาจสนใจ
เทคนิคการทำภาพขาว - ดำ ให้เป็นภาพสี
Black-Hawk (183,611 - 29 ก.พ. 51)
สร้างข้อความแบบโค้งพลิ้วบน Illustrator
langjuko (68,692 - 29 ต.ค. 51)
เลือกดูข้อความที่อยู่คนละหน้าได้พร้อมกัน
นายนุก (19,799 - 07 มี.ค. 51)
USB Flash Drive Manager
เว็บไทยดีดี (25,257 - 03 พ.ค. 51)
เคล็ดไม่ลับกับการวาดเส้นโค้งให้ดูสวยงาม
Mr.GuruZ (153,341 - 04 มิ.ย. 49)
นามบัตรส่วนตัว ฟรีสไตล์ไม่เหมือนใคร
ธนิศา ไชยภูริพัฒน (79,214 - 19 ม.ค. 51)
การส่งเมล์ด้วยฟังก์ชั่นส่งเมล์ แบบธรรมดา
เฟริสท์ (46,838 - 07 ธ.ค. 50)
การเซตค่าโปรแกรม Edit Plus
Mr.POP (36,099 - 05 พ.ย. 49)