Rollover Image ด้วย CSS

ปกติเวลาเราจะทำเมนูที่ประกอบด้วยรูป เมื่อนำ Mouse ไปวางก็จะเปลี่ยนรูปให้ จะทำอย่างนั้นได้ก็ต้องใช้ Javascript เข้าช่วย จริงๆใน Dreamwever ก็มีนะ แต่ถ้าหากเราคำนึงถึง SEO ลิงค์ต่างๆควรจะเป็น Text เพราะ Bot จะไต่ลิงค์ได้ง่าย และรู้ความหมายในทันทีโดยอ่านจากชื่อลิงค์ เมื่อเทียบกับรูป เอ๊า! อย่างนี้ก็ไม่ต้องมีเมนูที่ป็นรูปกันพอดี อ่านี่แหล่ะที่เราจะมาทำกันคือ

เปลี่ยนText ลิงค์ธรรมดา ไปเป็นรูป แถม Rollover ได้อีก

ขั้นแรกก็สร้างลิงค์ปกติ และต้องกำหนด ID ของลิงค์เพื่อให้ CSS อ้างถึงด้วย

<a href="#" id="menu_product">Product</a>

ต่อมาก็ใส่ CSS จัดการให้มันแสดงเป็นรูปซะ

<STYLE>

a#menu_product { text-indent: -1000px;background-image:url(menu_product.png); height: 50px; width:200px;}

a#menu_product:hover { background-image:url(menu_product_a.png); }

</STYLE>

จากโค้ดก็มีการเรียก CSS ปกติโดยมี 2 แบบคือลิงค์ธรรมดา(a#menu_product) กับลิงค์ตอน mouse over(a#menu_product:hover) คำสั่งหลักๆก็มีไม่ีกี่คำสั่งดังนี้

• text-indent สั่งให้ดัน Text ที่อยู่ในภายในลิงค์ คือคำว่า Product ออกไปทางซ้ายจะได้ไม่ต้องมาแสดงทับ background-image ที่เราโหลดมาแสดงแทน(menu_product.png)
• heightและwidth กำหนดกว้างสูงตามรูป background

เรียบร้อย ถ้ามีหลายลิงค์ก็ทำแบบเดียวกันแต่ ID ต้องไม่ซ้ำกันนะคับ

ตัวอย่าง(Viewsource ดูเองได้เลยครับ) : http://www.memo8.com/lab/css/roll-over-1/roll-over-1.html

Firefox Web Developer Toolbar

      Firefox Extension ดีๆที่ชื่อก็บอกอยู่แล้วว่าสำหรับใคร ตัวนี้ผมขาดไม่ได้ ป่ะหนึ่งขาดเธอขาดใจกันเลยทีเดียว ความสามารถมากถึงมากที่สุด ทั้ง Disable CSS , Display form detail , แสดง Id ของ element ต่างๆ โอย…เยอะมากต้องลองติดตั้งดูเอาเองแล้วกันครับ จะว่าไป Extension ตัวนี้ก็มีมานานพอสมควรแล้วแต่ก็ขอมาแป่ะไว้ซะหน่อยเผื่อมีคนทำเว็บใหม่ๆที่ไม่รู้มาอ่านเจอ อุอุ… ^_^

ติดตั้งไปที่นี่จ้า : https://addons.mozilla.org/en-US/firefox/addon/60

จำลอง OS ในเครื่องเราด้วย VirtualBox

  VirtualBox เป็นโปรแกรมประเภท virtual machine ที่สามารถจำลอง OS ต่างๆหลากหลาย Platform ซึ่งเป็น “Open Source Software” ของฟรีดีๆมา อีกแล้วครับท่าน

Download ที่นี่  : http://www.virtualbox.org/wiki/Downloads

รวมลิงค์ Javascript Frameworks

หลายเดือนนี้ผมเขียนเว็บ Dynamic ค่อนข้างเยอะลูกเล่นแพรวพราว สิ่งที่ได้เรียนรู้อีกอย่างนึงคือ หากจะให้เว็บไซต์หวือหวามากๆ ผมว่ายังไงๆก็ต้องเป็น Flash อยู่ดี ครั้นจะมาเขียน Javascript หรือใช้การรวมเทคโนโลยี AJAX เข้าช่วย ก็สู้ Flash ไม่ได้ในเรื่อง Motion ที่นุ่มนวลกว่าแน่นอน  ผมยังจำได้สมัยทำงานแรกๆนั้น ก็ป้วนเปี้ยนอยู่กับ Flash กะว่าจะเขียน Action Script ให้ได้บ้าง แต่ไปๆมาๆ ก็เริ่มหางเหิน (เพราะเราไม่คู่กัน ฮ่าๆๆ) แต่บางครั้ง ลูกเล่นเล็กน้อยเพื่อให้เว็บดูใช้งานง่าย เช่น การลากวาง,แสดงเพจแบบแบ่งการโหลด , หรือต่างๆนาๆ ตรงนี้แหล่ะเหมาะกับ Javascript Javascript เขียนสนุกดีนะ แต่ก็ Sensitive  พอตัว แค่พิมพ์ผิดนิดเดียวเล่นเอาการแสดงผลเจ๊งได้ง่ายๆเลยทีเดียว ตัดบทเลยแล้วกัน มาดูรายการลิงค์ Javascript Frameworks กันดีกว่า

1. http://script.aculo.us/
2. http://www.prototypejs.org/
3. http://www.mootools.net/
4. http://jquery.com/
5. http://www.mochikit.com/
6. http://rialto.improve-technologies.com/wiki/
7. http://dojotoolkit.org
8. http://labs.adobe.com/technologies/spry/
9. http://asp.net/ajax/
10. http://sourceforge.net/projects/clean-ajax/

อ้างอิงลิงค์จากที่นี่ :

http://speckyboy.com/2008/04/01/top-10-javascript-frameworks-which-do-you-prefer/

ติดตั้ง IIS ไม่ได้ เพราะหาไฟล์ staxmem.dl_ ไม่เจอ

ไม่ไ้ด้ติดตั้ง IIS มานานมาก พอมาติดตั้งกะไว้เขียน ASP.NET ก็เจอปัญหาตามหัวข้อ อะไรวะเนี่ย  Windows Pack2 เอากรุอีกแล้ว T_T ฮือ… เลยไปเจอวิธีแก้ไขจากเว็บ  Support ของ microsoft โดยเป็น command prompt ซ่อมแซม Database Utility ที่มีปัญหา แต่ถ้าอยากรู้ละเอียดกว่านี้ก็แปลเอาเองละกันเด้อ ผมก็มีปัญญามั่วแค่นี้แหล่ะเหอๆ แต่ได้ผล วิธีการดังนี้จ่ะ

1. คลิก Start Menu >> Run >> พิมพ์ cmd
2. ให้พิมพ์คำสั่งตามด้านล่างนี้ แล้วเคาะ Enter

esentutl /p %windir%\security\database\secedit.sdb

3. จะมีหน้าต่าง warningขึ้นมาให้กดปุ่ม OK
4. จากนั้นรอจนกว่าระบบจะ “Repair” เสร็จ

“ทีนี้ลองกลับไปติดตั้ง IIS ใหม่อีกครั้งครับ น่าจะได้แล้วล่ะ”

ที่มา : http://support.microsoft.com/kb/555268

ฟังก์ชั่น Get URL Parameters ด้วย Javascript

function gup( name ){
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}

Example

gup( 'ParameterName');

ที่มา : http://www.netlobo.com/url_query_string_javascript.html

JavaScript Number Format v1.5.4

ฟังก์ชั่นไว้สำหรับจัดการกับรูปแบบตัวเลขครับ จัดการจุดทศนิยม หรือ เติมเครื่องหมายคอมม่าให้
Examples

<script type="text/javascript" src="numberFormat154.js"></script>
<script type="text/javascript">
var num = new NumberFormat(10901.375).toFormatted();
// num will equal 10,901.38
</script>

Download : NumberFormat154.js

จัด Flash อยู่กลางหน้า Page แนวตั้งแนวนอน

ใช้ CSS ช่วยอีกล่ะก๊า…ขอยกตัวอย่างกับ Flash กว้าง 1,000px สูง 580 px
CSS.

#container_flash{

position: absolute;  width: 1000px; height: 580px; left: 50%; margin-left: -500px;  top: 50%; margin-top: -290px;

}

ค่าที่ต้องกำหนดตามความกว้าง/สูงของ Flash
- width กำหนดให้เท่ากับความกว้างของ Flash
- height  กำหนดให้เท่ากับความสูงของ Flash
- margin-left ครึ่งนึงของความกว้างของ Flash แล้วเติมเครื่องหมายลบ(-) ไว้ข้างหน้า
- margin-top ครึ่งนึงของความสูงของ Flash แล้วเติมเครื่องหมายลบ(-) ไว้ข้างหน้า
Exsample.

<div id="container_flash">ใส่ Falsh ที่นี่</div>

วิธีแสดง Hidden Files ใน WS_FTP , CuteFTP และ FileZilla

บางครั้งเราต้องการจัดการกับไฟล์ .htaccess หรือ .htpasswd
แต่พอupload ผ่าน FTP กับมองไม่เห็นไฟล์ดังกล่าว
เพราะServer อย่าง Linux หรือ Unix จะเซ็ตให้ไฟล์ ที่มี(.)นำหน้า เป็น system file
และ ซ่อนไฟล์นั้น และนี่ก็คือการเซ็ต FTP Client ให้แสดงไฟล์ที่ซ่อนเหล่านั้น

WS_FTP

CuteFTP

FileZilla ( อันนี้ขอแยกเป็นเวอร์ชั่น)

เลือกเมนู Server > Force showing hidden files สำหรับเวอร์ชั่นใหม๋ๆ
เลือกเมนู View > View hidden files สำหรับเวอร์ชั่นเก่า

Ref: http://www.tech-evangelist.com/category/web-site-development/

Convert File ไป UTF8 ด้วย Ansi2Uni 1.1

ฟรีแวร์ดีๆสำหรับ Convert ไฟล์เป็น UTF8 โปรแกรมเล็กแต่คุณภาพสุดยอดครับ สามารถเลือกแบบ Select All ได้ด้วย

ให้ตั้งค่าตรง codepage เป็น 874 ก่อนนะครับ ถึงจะ convert ภาษาไทยได้

ดาวน์โหลดที่นี่เลย

http://www.ksourcerer.org/11123/details-ansi2uni.html

http://ansi2uni.robin-programmer.qarchive.org/