ปุ่มเลือกสี

แบ่งโค้ดให้เป็น 3 ไฟล์ครับ คือ CSS, PHP และ Javascript

ไฟล์ CSS ครับ

ol.menu {
  list-style-type:none;
  display:table;
  float:none;
  margin:0 auto;
}
.menu li {
  display:inline;
  white-space:nowrap;
}
.menu span {
  float:left;
  display:table;
  padding:2px;
  cursor:pointer;
}
.button { /* ปุ่มเลือกสี ปกติ */
  margin:1px;
}
.hover { /* ปุ่มเลือกสี เมื่อเมาส์อยู่บน */
  background:#D3E4F5;
  border:1px solid #167FB2;
  margin:0;
}
.current { /* ปุ่มเลือกสี เมื่อเลือก */
  background:#D3E4F5;
  border:1px solid #167FB2;
  margin:0;
}

อันนี้เป็นไฟล์ PHP

<form action="?" method="post" name="frm">
<ol class="menu">
<?
//กำหนดโค้ดสีที่ต้องการลงใน array
$color= array("black", "maroon", "#F60310", "#E76E14", "#E7C514", "#1DDC12", "olive", "#148CE7", "navy", "#6C1CEA", "fuchsia", "teal", "purple", "gray", "silver", "white");
for ($i = 0; $i < count($color); $i++) {
  echo "<li><span id=\"color$i\" title=\"$color[$i]\" class=\"button\"><font class=\"btncolor\" style=\"background-color:$color[$i];color:$color[$i]\" >Yy</font></span></li>";
}
?>
</ol>
<!--input รับค่าสีที่เลือกสำหรับการส่งต่อผ่านฟอร์ม-->
<input type="hidden" id="usercolor" name="usercolor" />
</form>

และไฟล์ Javascript

//ปุ่มเลือกสี
for (i = 0; i < <?=count($color)?>; i++) {
  var obj = document.getElementById("color" + i);
  obj.onmouseover = function(){this.className = "hover"};
  obj.onmouseout = function(){
    if (this.id == document.getElementById("usercolor").value) this.className = "current";
    else this.className = "button";
  };
  obj.onclick = function(){selectcolor(this.id)};
}

//เมื่อคลิกปุ่ม
function selectcolor (id) {
  for (i = 0; i < <?=count($color)?>; i++) {
    document.getElementById("color" + i).className = "button";
  };
  if (!document.getElementById(id)) id = "color0";
  document.getElementById("usercolor").value = document.getElementById(id).title;
  document.getElementById(id).className = "current";
}

ค่าสีที่เลือกจะสามารถอ่านได้จาก $_REQUEST[usercolor] นะครับ ซึ่งจะถูกส่งไปพร้อมกับฟอร์มเมื่อ submit
ตัวอย่าง
ผู้เขียน goragod โพสต์เมื่อ 05 ส.ค. 2552 เปิดดู 18,699 ป้ายกำกับ XHTMLCSSJavascript
^