ทำ ajax คลิกแล้วให้เปลี่ยนรูป ช่วยหน่อยนะครับ

[pitchayabb]

คือผมจะทำระบบจองตั๋วหนังออนไลน์ ทีนี้ต้องทำ plan ที่นั่ง
พอคลิกที่รูปที่นั่งแล้วให้เปลี่ยนรูปเปนรูปติ้กถูกเพื่อให้คนที่กำลังทำการจอง
เหนว่ากำลังจองที่ไหนแล้วส่งค่าอ่ะครับ
เลยจะถามว่าเราควรทำแบบไหนดีอ่ะคับ

[thebusted]

ใช้ CSS + Javascript (ผมขอใช้เป็น JQuery นะครับ)
1. สร้างรูปและกำหนด css ก่อนครับ
1.1. สร้างรูปขึ้นมา 2 รูป รูปที่ 1 เป็นรูปเก้าอี้เปล่า ๆ รูปที่ 2 เป็นรูปเก้าอี้ที่มีเครื่องหมายถูก (ขนาดความกว้างและยาวต้องเท่ากันทั้ง 2 รูป)
1.2. นำไฟล์ทั้ง 2 มารวมกันเป็นไฟล์เดียว ตัวอย่างของผมก็จะ เอารูปเก้าอี้เปล่า ๆ ไว้ข้างบน และเอาเก้าอีที่มีเครื่องหมายถูกไว้ข้างล่าง
ตัวอย่าง ไฟล์แรก 16 x 16 pixel ไฟล์สอง 16 x 16 pixel นำมารวมกันแล้วจะได้ไฟล์เดียวที่ 16 x 32 pixel (กว้าง x ยาว)
1.3. สร้าง css (IE7+)

โค้ด: เลือกทั้งหมด

<style>
.seat {
	background-image: url(seat.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
	display: inline-block;
	height: 16px;
	overflow: hidden;
	text-indent: -9999px;
	width: 16px;
}
.checked {
	background-position: 0 -16px;
}
</style>

1.4. HTML

โค้ด: เลือกทั้งหมด

<a href="javascript: void(0);" id="seat_A1" class="seat" rel="A1">ที่นั่ง A1</a>
<a href="javascript: void(0);" id="seat_A2" class="seat" rel="A2">ที่นั่ง A2</a>
<a href="javascript: void(0);" id="seat_A3" class="seat" rel="A3">ที่นั่ง A3</a>
<a href="javascript: void(0);" id="seat_A4" class="seat" rel="A4">ที่นั่ง A4</a>
<a href="javascript: void(0);" id="seat_A5" class="seat" rel="A5">ที่นั่ง A5</a>
<a href="javascript: void(0);" id="seat_B1" class="seat" rel="B1">ที่นั่ง B1</a>
<a href="javascript: void(0);" id="seat_B2" class="seat" rel="B2">ที่นั่ง B2</a>
<a href="javascript: void(0);" id="seat_B3" class="seat" rel="B3">ที่นั่ง B3</a>
<a href="javascript: void(0);" id="seat_B4" class="seat" rel="B4">ที่นั่ง B4</a>
<a href="javascript: void(0);" id="seat_B5" class="seat" rel="B5">ที่นั่ง B5</a>

1.5. JQuery

โค้ด: เลือกทั้งหมด

<script type="text/javascript">
$(document).ready(function(){
	$('a[id^="seat_"]').bind({
		click: function(){
			var seat = $(this).attr('rel');
			if($(this).hasClass('checked')) {
				alert('ที่นั่งนี้มีคนจองแล้ว')
			} else {
				/* AJAX ตรวจสอบจากฐานข้อมูลว่าที่นั่งนี้ว่างรึไม่ ตรวจสอบเพื่อป้องกันการปลอมแปลง */
				if(checkSeatEmpty(seat)) {
					$(this).addClass('checked');
					addSeat(seat)
				} else {
					alert('ที่นั่งนี้มีคนจองแล้ว')
				}
				/*
				checkSeatEmpty และ addSeat เป็น Function ที่สมมติขึ้นมา
				โดย checkSeatEmpty จะทำการตรวจสอบว่าในฐานข้อมูลที่นั่ง x ว่ารึไม่ หากว่างให้ส่งค่า true หากไม่ว่างให้ส่ง false
				และ addSeat จะทำการเพิ่มที่นั่ง x ลงในฐานข้อมูล
				*/
			}
		}
	});
});
</script>

ลองเอาไปประยุกต์ได้เลยนะครับ