CSS Box Shadow กำหนดเงาให้กับกล่องข้อความ

เป็นรูปแบบของการกำหนด code css stylesheet ให้กับกล่องข้อความเพื่อความสวยงามให้กับเว็บของเราได้ส่วนหนึ่ง แต่เป็นที่น่าเสียดายที่ IE มักจะไม่ค่อย support มากนักกับลูกเล่นของ CSS....

กำหนดเงาให้กับกล่องของข้อความ มี 2 รูปแบบ

รูปแบบที่ 1 แบบเงาขอบนอก CSS

.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}

จะมี Property อยู่ 4 ค่า เรียงตามลำดับ
1. เมื่อค่าเพิ่มขึ้นจะเป็นการขยับเงาไปทางด้านขวามากขึ้น
2. เมื่อค่าเพิ่มขึ้นจะเป็นการขยับเงาลงไปด้านล่างมากขึ้น
3. เมื่อค่าเพิ่มขึ้นจะทำให้ความฟุ้ง ความเบลอ ของเงามากขึ้น
4. เป็นสีของเงา

ตัวอย่าง

รูปแบบที่ 2 แบบเงาขอบใน CSS

.shadow {
   -moz-box-shadow:inset 0 0 10px #000000;
   -webkit-box-shadow:inset 0 0 10px #000000;
   box-shadow:inset 0 0 10px #000000;
}

ตัวนี้จะเพิ่มคำว่า inset เข้ามาครับ เป็นการกำหนดให้เงาฟุ้งเข้าด้านใน

ตัวอย่าง

หมายเหตุ ใช้ไม่ได้กับ IE นะครับ...

Read More

HTML Form, Textbox, Password, checkbox, radio, Text Area

การสร้างเว็บแอพพลิเคชั่นที่มีการรับข้อมูลจากผู้ใช้ จะประกอบไปด้วย 2 ส่วน คือ ส่วนของการรับข้อมูล และ ส่วนของการประมวลผล ส่วนของการรับข้อมูลคือส่วนของแบบฟอร์ม (Form) คือการสร้าง form ขึ้นมารับข้อมูลจากผู้ใช้ที่จะป้อนข้อมูลเข้ามาตามแบบฟอร์มที่เราสร้างไว้ โครงสร้างของ form เริ่มต้นด้วย แท็ก <form> และ ฟิลด์รับข้อมูลทั้งหลายในภาษา html เช่น ช่องรับข้อความ, เช็คบ็อก, และปุ่มเรดิโอ เมื่อผู้ใช้กดปุ่ม submit ข้อมูลก็จะถูกส่งไปยังส่วนที่สอง คือ ส่วนของการประมวลผล คือภาษา PHP

โครงสร้างของฟอร์ม

<form name="form_name" method="get/post" action="url">
...ส่วนของการรับข้อมูล...
</form>

name = ชื่อของฟอร์ม
method = กำหนดวิธีในการส่งข้อมูล มี 2 วิธีคือแบบ GET และแบบ POST
action = url การกำหนดปลายทางในเว็บเซิร์ฟเวอร์ที่จะส่งข้อมูลไปประมวลผล
การส่งแบบ GET คือการนำข้อมูลในฟอร์มไปต่อท้าย URL เป็นแบบ Query String ดังนั้นข้อมูลจะถูกเห็นได้จากช่อง URL อาจจะไม่ปลอดภัยสำหรับการส่งข้อมูลที่เป็นควาามลับ
การส่งแบบ POST ข้อมูลจะถูกซ่อน ไม่นำมาต่อท้าย URL เหมือนแบบ GET

ส่วนของการรับข้อมูลมี
ช่องรับข้อความ (Text File หรือ Textbox)
รูปแบบ

<input type="text" name="" value="" size="" maxlength=""/>

type = "ชนิดของช่องรับข้อมูล เช่น text, password, checkbox, radio"
name = "ชื่อของช่องรับข้อความ"
value = "ค่าเริ่มต้น ทีเรากำหนดผู้ใช้สามารถแก้ไขได้"
size = "ความกว้างของช่องรับข้อความ"
maxlength = "จำนวนตัวอักษรสูงสุดที่ป้อนได้"

Type ชนิด text ตัวอย่าง

<form name="form1" method="post" action="text.php">
ชื่อ : <input type="text" name="username" size="20" maxlength="40"/><br/>
นามสกุล : <input type="text" name="lastname" size="20" maxlength="40"/><br/>
</form>

ชื่อ :
นามสกุล :

---

Type ชนิด password ตัวอย่าง

<form name="form1" method="post" action="password.php">
ชื่อ : <input type="text" name="username" size="20" maxlength="40"/><br/>
รหัสผ่าน : <input type="password" name="password" size="20" maxlength="8"/><br/>
</form>

ชื่อ :
รหัสผ่าน :

---

Type ชนิด checkbox ตัวอย่าง

<form name="form1" method="post" action="checkbox.php">
คุณชอบทาน :
<input type="checkbox" name="drink" value="tea"/>ชา&nbsp;&nbsp;
<input type="checkbox" name="drink" value="coffee"/>กาแฟ&nbsp;&nbsp;
<input type="checkbox" name="drink" value="milk"/>นม
</form>

คุณชอบทาน : ชา   กาแฟ   นม

---

Type ชนิด radio ตัวอย่าง

<form name="form1" method="post" action="radio.php">
ระหว่างเงาะ กับ ลองกอง คุณชอบทานอะไรมากที่สุด :
<input type="radio" name="fruit" value="0"/>เงาะ&nbsp;&nbsp;
<input type="radio" name="fruit" value="1"/>ลองกอง&nbsp;&nbsp;
</form>

ระหว่างเงาะ กับ ลองกอง คุณชอบทานอะไรมากที่สุด : เงาะ   ลองกอง

---

ช่องรับข้อความแบบหลายบรรทัด (Text Area)
รูปแบบ

<textarea name="ชื่อ" cols="ความกว้าง" rows="ความสูง">..ค่าเริ่มต้นของแท็ก มีหรือไม่มีก็ได้..</textarea>

 ตัวอย่าง Text Area

<form>
<textarea name="address" cols="40" rows="4">กรอกที่อยู่ของคุณลงในช่องนี้</textarea>
</form>

กรอกที่อยู่ของคุณลงในช่องนี้

บทความนี้เป็นบทความพื้นฐานสำหรับมือใหม่หัดขัดขับ แบบรวบรัดเป็นเร็ว ส่วนคนที่รู้แล้วก็ ขออภัยด้วยครับ ...

Read More

PopupImage Onmouseover ป๊อปอัพรูปภาพพร้อมข้อมูลตัวอย่าง PHP,jQuery

บทความนี้ก็ยังไม่พ้นเรื่องปอ๊ปอัพอยู่นะครับ เป็นป๊อปอัพแบบ onmouse over พอเอาเมาว์ไปชี้ ก็จะแสดงป๊อปอัพขึ้นมา พร้อมกับแสดงข้อควาามบรรยาย หรือข้อมูลที่เราต้องการ เมื่อใช้เมาว์คลิก เราอาจทำลิงค์ไปยังเพจต่างๆเพื่ออ่านข้อมูลเพิ่มเติม หรือ เพื่อโชว์รูปภาพต้นแบบก็ได้.....

เริ่ม...
บทนี้มีไฟล์ 3 ไฟล์คือ
jquery.js
config.php
popOnmouseOver.php

สร้างฐานข้อมูลสำหรับทดสอบ SQL

CREATE TABLE `image` (
  `id_image` int(11) NOT NULL AUTO_INCREMENT,
  `image` char(100) NOT NULL DEFAULT '',
  `title` char(100) NOT NULL DEFAULT '',
  `data` text NOT NULL,
  PRIMARY KEY (`id_image`)
);

เหมือนเดิมครับ เรามีพระเอกของเรานั่นก็คือ jQuery.js

ไฟล์ popOnmouseOver.php
นำเข้า jquery

<script type="text/javascript" src="jquery.js"></script>

ดึงข้อมูลรูปภาพขึ้นมาแสดงก่อนด้วยโค้ดนี้

ไฟล์ popOnmouseOver.php

<?php
include 'config.php';
$sql = "select * from image";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
$i=0;
while($i<$num){
$row = mysql_fetch_array($result);
$image = $row[image];
$title = $row[title];
$data = $row[data];

echo "<a href ='uploads/$image'/>";
echo "<img id='images' height='60'
src='uploads/$image' alt='$title' rel='$data'/>";
echo "</a>";
$i++;
}
?>
<p id='desc'style="display: none;"></p>

จากนั้นก็กำหนด CSS ดังนี้
ไฟล์ popOnmouseOver.php

<style>
a img{
border:none;
}
#largeImage{
border:1px solid #dddddd;
padding:5px;
position: absolute;
width:300px;
background: #293849;
overflow: hidden;
color:#ffffff;
}

#largeImage img{
width:110px;
}

#images{
margin-left:20px;
}

#title{
height:auto;
padding:5px;
position:relative;
background: #88D0FF;
}
</style>

แล้วตามด้วย พระเอกของเรา javascript jQuery ดังนี้
ไฟล์ popOnmouseOver.php

<script type="text/javascript">
$(function(){
var offsetX=20;
var offsetY=10;
$('a').hover(function(e){

var imgRel = $(this).find('img').attr("rel");
var imgAlt = $(this).find('img').attr("alt");
var href = $(this).attr('href');
var html = '<div id="largeImage">';
    html += '<img align="left" style="margin-right: 10px" src="'+href+'"/>';
    html += '<span id="desc"<b><font color="#DCD995">'+imgAlt+'</font></b>';
    html += '<br><font size="2">'+imgRel+'</font></span></div>';
$(html)
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.appendTo('body');
}, function(){
$('#largeImage').remove();
});
$('a').mousemove(function(e){
$('#largeImage').css('top', e.pageY + offsetX)
.css('left', e.pageX + offsetX);
});
});
</script>

เสร็จแล้วครับ โค้ดสั้นๆแต่ได้ผลเป็นที่น่าพอใจ...เขาละ jQuery.

อาจจะพูดน้อยไปนิดหนึ่งนะครับ เพราะว่ามันคล้ายๆกับบทความก่อนมากๆ
บทความนี้ก็ขอจบลงเพียงเท่านี้ครับ.....

Read More

Popup Image Onmouse คลิกฟังก์ชั่น อย่างง่าย PHP, jQuery, SQL

ไม่รู้จะตั้งหัวข้ออย่างไร ก็เลยตั้งเป็นไทยคำ อังกฤษคำ เสียเลย Popup Image ไปถามลุงกูแล้ว ลุงกู(google)... แกบอกว่าแปลว่า ภาพป๊อปอัพ นั่นเอง บทความนี้เป็นวิธีการทำภาพป๊อปอัพ ด้วยการดึงข้อมูลรูปภาพออกมาจากฐานข้อมูล มาแสดงแบบง่ายๆ ที่เขาเรียกว่า Simple ๆ อะไรนี่แหละ แต่ก็น่าสนใจไม่น้อย ที่ท่านสามารถนำไปพัฒนาต่อได้....

เริ่ม...
บทนี้มีไฟล์ 3 ไฟล์คือ
jquery.js
config.php
popimageonclick.php

สร้างฐานข้อมูลสำหรับทดสอบ SQL

CREATE TABLE `images` (
`id_image` int(11) NOT NULL AUTO_INCREMENT,
`image` varchar(255) NOT NULL DEFAULT '',
PRIMARY KEY (`id_image`)
);

ไฟล์ popimageonclick.php
นำเข้า jquery

<script type="text/javascript" src="jquery.js"></script>

ผมจะดึงข้อมูลรูปภาพขึ้นมาแสดงก่อนด้วยโค้ดนี้ จุดสำคัญท่านจะต้องแสดงภาพออกมาให้ได้ก่อน ที่จะไปเขียน
โค้ดเพิ่มเติมในส่วนอื่นๆ

<?php
include 'config.php';
$sql = "select * from images";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
$i=0;
while($i<$num){
$row = mysql_fetch_array($result);
$id_image = $row[id_image];
$image = $row[image];
$title = $row[title];
echo "<a href ='#' class='popup' relid='popimage' id='imageleft'/>";
echo "<img border='0' height='60' src='upload/$image' img ='$image'/>";
echo "</a>";
$i++;
}
?>

ตรงนี้มีข้อสังเกตุ 2 จุดคือ
relid='popimage' กับ img='$image'
กำหนดมาจากใหน ตอบ ไม่ได้กำหนดมาจากใหน แต่กำหนดขึ้นเองในกรณีที่เราไม่มีตัว select แบบ
Attribute Equals Selector เช่น id หรือ class เพื่อให้ jquery สามารถค้นหาข้อมูลผ่าน
Selector นี้ได้

จากนั้นผมก็สร้าง tag div ขึ้นมาเพื่อเอาไว้แสดงรูปตอนป๊อปอัพ ดังนี้

<div class="popbox" id="popimage"></div>
<div id="popfade"></div>

แสร็จแล้วก็มากำหนด javascript ให้กับการคลิกเมาว์ เพื่อแสดงภาพป๊อปอัพ ดังนี้

<script type="text/javascript">
$(document).ready(function() {
$('a.popup').click(function() {

var image = $(this).find('img').attr("img");//ค้นหาtag img เก็บค่าจาก seletor img
var html = '<center><div id="borderimg">';
html +='<div id="showimage"><img src="upload/'+image+'"/>';
html +='</div></div></center>';

//กำหนดให้รูปไปแสดงที่ id popimage
var showimage = document.getElementById('popimage').innerHTML= html;

//เก็บค่าจาก seletor relid
var popid = $(this).attr('relid');

$('#' + popid).fadeIn();
$('body').append('<div id="popfade"></div>');
$('#popfade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();

//กำหนดให้รูปแสดงอยู่ตรงกลางจอภาพ
var poptop = ($('#' + popid).height() + 10) / 2;
var popleft = ($('#' + popid).width() + 10) / 2;
$('#' + popid).css({
'margin-top' : -poptop,
'margin-left' : -popleft
});
});
//กำหนดให้รูปหายไปตอนคลิกเมาว์บนพื้นที่ว่าง
$('#popfade').click(function() {
$('#popfade, #popimage').fadeOut()
return false;
});

});
</script>

จากนั้นก็มากำหนด CSS ดังนี้

.popbox {
width:auto;
height:auto;
background-repeat:no-repeat;
display: none;
float: left;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
}

#popfade {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;

}

#close img {
text-decoration:none;
}

#close {
width:50px;
height:50px;
position: absolute;
float:right;
}

#showimage{
padding:10px;
background: #dddddd;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
}

#borderimg{
border:6px solid #666666;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

#imageleft{
text-decoration:none;
margin-left:10px;
}

Code ที่แสร็จแล้ว

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>popup image demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.popup').click(function() {

var image = $(this).find('img').attr("img");
var html = '<center><div id="borderimg">';
html +='<div id="showimage"><img src="upload/'+image+'"/>';
html +='</div></div></center>';
var showimage = document.getElementById('popimage').innerHTML= html;
var popid = $(this).attr('relid');

$('#' + popid).fadeIn();
$('body').append('<div id="popfade"></div>');
$('#popfade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
var poptop = ($('#' + popid).height() + 10) / 2;
var popleft = ($('#' + popid).width() + 10) / 2;
$('#' + popid).css({
'margin-top' : -poptop,
'margin-left' : -popleft
});
});
$('#popfade').click(function() {
$('#popfade, #popimage').fadeOut()
return false;
});

});
</script>

<style type="text/css">

.popbox {
width:auto;
height:auto;
background-repeat:no-repeat;
display: none;
float: left;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
}

#popfade {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;

}

#close img {
text-decoration:none;
}

#close {
width:50px;
height:50px;
position: absolute;
float:right;
}

#showimage{
padding:10px;
background: #dddddd;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
}

#borderimg{
border:6px solid #666666;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

#imageleft{
text-decoration:none;
margin-left:10px;
}
</style>

</head>
<body>
<div class="popbox" id="popimage"></div>
<div id="popfade"></div>

<?php
include 'config.php';
$sql = "select * from images";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
$i=0;
while($i<$num){
$row = mysql_fetch_array($result);
$id_image = $row[id_image];
$image = $row[image];
$title = $row[title];
echo "<a href ='#' class='popup' relid='popimage' id='imageleft'/>";
echo "<img border='0' height='60' src='upload/$image' img ='$image'/>";
echo "</a>";
$i++;
}

?>

</body>
</html>

บทความนี้ก็จบลงเพียงเท่านี้ครับ.......

Read More