ปุ่มเลือกสี
ไฟล์ 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
ตัวอย่าง