Post archive
Tag: image
-
สร้าง mouse over image caption ด้วย CSS ล้วนๆ
คลิกที่นี่เพื่อดู Online Demo หลังจากที่ท่านได้ดู Demo ผมเชื่อว่าท่านจะต้องคุ้นแน่นอน การทำงานในลักษณะนี้ แต่ที่ท่านเห็นๆมา เขาจะใช้ javascript เป็นตัวสร้าง หรืออาจจะเป็น jQuery แต่สำหรับบทความครั้งนี้ ไม่ใช่เลย บทความนี้จะใช้ CSS เท่านั้น แต่จะทำงานเหมือน javascript แป๊ะๆ มาดูกันเลยครับ ว่าทำกันอย่างไร HTML เริ่มต้นที่โครงสร้างหลักกันก่อน <div class="imgteaser"> <a href="#"> <img src="IMAGE_059.jpg" alt="Itame" /> <span class="desc"> <strong>อีติ๋มตายแน่</strong> ตายแน่ๆ ในโรงภาพยนต์ใกล้บ้านท่าน </span> </a> </div><div class="imgteaser"> <a href="#"> <img src="IMAGE_059.jpg" alt="Itame" /> <span class="desc"> <strong>อีติ๋มตายแน่</strong> ตายแน่ๆ ในโรงภาพยนต์ใกล้บ้านท่าน </span> </a> […]
READ MORE -
วิธีเปลี่ยนเมนูListธรรมดาๆให้น่าสนใจ
โดยปกติแล้ว ใน HTML เมื่อเราใช้ ลิสต์ แบบไม่เรียงลำดับ <ul> ผลลัพธ์ที่แสดงออกมา จะมีวงกลมดำๆ อยู่ด้านหน้า เราสามารถเปลี่ยนวงกลมดำๆ เป็นภาพได้ด้วย css ดูโค้ดนะครับ 1 2 3 4 5 6 7 8 9 10 <style type="text/css"> <!– .list_style { list-style-image: url(images/house.png); } –> </style> <ul> <li class="list_style">หัวข้อที่ 1</li> <li class="list_style">หัวข้อที่ 2</li> </ul><style type="text/css"> <!– .list_style { list-style-image: url(images/house.png); } –> […]
READ MORE -
PHP : อัปโหลดรูปภาพเก็บในฐานข้อมูล ภาค 3 แสดงผล
ครั้งที่แล้วแสดงการ อัปโหลดภาพเก็บในฐานข้อมูล ครั้งนี้จะแนะนำการนำภาพขึ้นมาแสดงบนหน้าเว็บ การนำภาพมาแสดงก็ไม่ได้เป็นอะไรที่มากไปกว่า เอาชื่อภาพจากฐานข้อมูล มาต่อให้ชี้ไปยังโฟลเดอร์ที่เราอัปโหลดภาพจริง เก็บไว้ ผมขอเพิ่มเติมว่า ให้สังเกตโค้ดตรงกำหนด ว่าจะให้ตารางแสดงกี่คอลัมน์ นะครับ เห็นถามกันในหลายๆเว็บบอร์ด จะเห็นว่าเราควบคุมได้ด้วยโค้ดแค่ 2 บรรทัด ดูโค้ดนะครับ <?php // ส่วนกำหนดการเชื่อมต่อฐานข้อมูล $hostname_connection = "localhost"; $database_connection = "db_test"; $username_connection = "root"; $password_connection = ""; $connection = mysql_pconnect($hostname_connection, $username_connection, $password_connection) or trigger_error(mysql_error(),E_USER_ERROR); mysql_query( "SET NAMES UTF8" ) ; // ดึงข้อมูลจากฐานข้อมูล ไม่มีโค้ดการแบ่งหน้านะจ๊ะ ไปเพิ่มเติมเอง mysql_select_db($database_connection, $connection); […]
READ MORE -
มาเปลี่ยน skin ให้กับ TinyMCE กันเถอะ
ตัว TinyMCE จะมาพร้อมกับ skin 2 ตัว ในโหมด advanced คือ default กับ o2k7 ซึ่งถ้าตอนเรียกใช้ เราไม่ได้ระบุว่าจะให้ใช้ skin ตัวไหน TinyMCE ก็จะใช้หน้าตาแบบ default ถ้าเกิดเบื่อหน้าตาแบบ default แล้ว เราก็มาเปลี่ยนมันซะเถอะ วิธีก็ไม่มีไรมาก แค่ตอนเราเรียกใช้ TinyMCE เราก็ระบุ skin ให้มันด้วย <script type=”text/javascript“> tinyMCE.init({ // General options mode : “exact”, elements : “textarea1” ,
READ MORE -
ภาคขยายความ การใช้งาน TinyMCE
จากบทความก่อนหน้านี้ ผมได้เสนอบทความการใช้งาน TinyMCE จะมีโค้ดส่วนหนึ่งที่ใช้เริ่มต้น การทำงาน TinyMCE วันนี้มาดูกันว่า ความหมายของ config แต่ละตัวนั้น หมายถึงอะไร และเป็นอะไรได้บ้าง
READ MORE -
การติดตั้งและใช้งาน TinyMCE WYSIWYG
การติดตั้งและใช้งาน TinyMCE WYSIWYG TinyMCE สคริปต์ที่จะทำให้ช่องเขียนข้อความ (<textarea>) ของเรา แปลงร่างไปคล้ายๆ ms word ท่านสามารถดาวน์โหลดฟรีได้ที่ http://tinymce.moxiecode.com/download.php โหลดมาแล้วก็แตกซิปซะนะครับ มาถึงขั้นตอนเริ่มการใช้งาน ผมสมมติว่าท่านกำลังทำหน้าเพจ เพจหนึ่ง มี <textarea> 1 ตัว ชื่อ textarea1 <textarea id="textarea1" cols="45" rows="5" name="textarea1"></textarea><textarea id="textarea1" cols="45" rows="5" name="textarea1"></textarea> และต้องการนำ TinyMCE ไปใช้กับ textarea ตัวนี้ ก่อนอื่นท่านต้อง include ไฟล์ javascript TinyMCE หลักเข้ามา <script src="tinymce_3_0b3/tinymce/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script><script src="tinymce_3_0b3/tinymce/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script> และ config ต่อเลย <script type="text/javascript"> tinyMCE.init({ // General […]
READ MORE
