1.HTML เริ่มต้นที่โครงสร้างหลักกันก่อน
<div class="imgteaser"> <a href="#"> <img src="IMAGE_059.jpg" alt="Itame" /> <span class="more">» Learn More</span> /*คำบรรยายบนรูป*/ <span class="desc"> <strong>จังหวัดตรัง</strong>/*คำบรรยายภายใน Caption*/ เมืองตรัง 92000 </span></a></div> |
2.กำหนดโครงสร้าง CSS เบื้องต้น แบบคร่าวๆ
.imgteaser { margin: 0; overflow: hidden; float: left; position: relative; }.imgteaser a { text-decoration: none; float: left;}/* ถ้าไม่ใส่ cursor: pointer ไป ตอนแสดงใน ie6 caption จะหน่วง*/.imgteaser a:hover { cursor: pointer;} |
3. ตกแต่งภาพให้มีกรอบ มีขอบ ทำให้ภาพดูสวยงาม
/* ตกแต่งภาพให้ดูคล้ายๆ ภาพโพลารอยด์*/.imgteaser a img { float: left; /*กำหนดตำแหน่งรูปภาพ*/ margin: 0;/*กำหนดขอบเขตรูปภาพ*/ border: none; padding: 10px; background: #fff; border: 1px solid #ddd; /*ขนาดขอบ,รูปแบบขอบ,สี*/} |
4. สร้างข้อความบนภาพ
.imgteaser a .more { position: absolute; right: 20px; bottom: 20px; /*ตำแหน่งข้อความ*/ font-size: 1.2em; color: #fff; background: #000; padding: 5px 10px; /*กำหนดความสูง,กว้างพื้นหลัง*/ filter:alpha(opacity=65); /*ความโปร่งใส*/ opacity:.65; /*ความโปร่งใส*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; } |
5. ส่วนนี้เป็นส่วนสำคัญ เมื่อเอาเมาส์ชี้ ข้อความบนภาพ ตัว caption จะปรากฏ
/* เมื่อเอาเมาส์ไปชี้ที่ข้อความบนรูปภาพ ตัว caption จะแสดงขึ้นมา โดยกำหนดความโปร่งแสงไว้ที่ 75%*//* ตรงนี้แหละที่เป็นจุดสำคัญ CSS ตรงนี้จะทำงานก็ต่อเมื่อเอาเมาส์ไปชี้ที่ภาพเท่านั้น เหมือน javascript */.imgteaser a:hover .more { visibility: hidden;} /*ข้อความบนรูปภาพหายเมื่อ caption ปรากฏ*/ .imgteaser a:hover .desc{ display: block;font-size: 1.2em; /*ขนาดตัวอักษร*/ padding: 10px 0; background: #111;filter:alpha(opacity=75);/* ความโปร่งใส่*/ opacity:.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; color: #fff; position: absolute; bottom: 11px; left: 11px; padding: 10px; margin: 0; width: 566px; border-top: 1px solid #999;} /* ตัว strong ใน caption กำหนดให้ใหญ่กว่าปกติหน่อย เพื่อความสวยงาม*/.imgteaser a:hover .desc strong { display: block; margin-bottom: 5px; font-size:1.5em;} |
6. การซ่อน caption การแสดงขึ้นมาครั้งแรก
.imgteaser a .desc { display: none; } |
7. โค้ดทั้งหมด ดังนี้
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style>.imgteaser { margin: 0; overflow: hidden; float: left; position: relative;}.imgteaser a { text-decoration: none; float: left;}/* ถ้าไม่ใส่ cursor: pointer ไป ตอนแสดงใน ie6 caption จะหน่วง*/.imgteaser a:hover { cursor: pointer;}/* ตกแต่งภาพให้ดูคล้ายๆ ภาพโพลารอยด์*/.imgteaser a img { float: left; margin: 0; border: none; padding: 10px; background: #fff; border: 1px solid #ddd;}.imgteaser a .more { position: absolute; right: 20px; bottom: 20px; font-size: 1.2em; color: #fff; background: #000; padding: 5px 10px; filter:alpha(opacity=65); opacity:.65; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/}.imgteaser a:hover .more { visibility: hidden;}/* เมื่อเอาเมาส์ไปชี้ที่ข้อความบนรูปภาพ ตัว caption จะแสดงขึ้นมา โดยกำหนดความโปร่งแสงไว้ที่ 75%*//* ตรงนี้แหละที่เป็นจุดสำคัญ CSS ตรงนี้จะทำงานก็ต่อเมื่อเอาเมาส์ไปชี้ที่ภาพเท่านั้น เหมือน javascript */.imgteaser a:hover .desc { display: block; font-size: 1.2em; padding: 10px 0; background: #111; filter:alpha(opacity=75); opacity:.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency color: #fff; position: absolute; bottom: 11px; left: 11px; padding: 10px; margin: 0; width: 566px; border-top: 1px solid #999;}/* ตัว strong ใน caption กำหนดให้ใหญ่กว่าปกติหน่อย เพื่อความสวยงาม*/.imgteaser a:hover .desc strong { display: block; margin-bottom: 5px; font-size:1.5em;}/* ตอนแสดงขึ้นมาครั้งแรก ให้ซ่อน caption ไว้ก่อน*/.imgteaser a .desc { display: none;}</style></head><body><div class="imgteaser"> <a href="#"> <img src="IMAGE_059.jpg" alt="Itame" /><span class="more">» Learn More</span> <span class="desc"> <strong>จังหวัดตรัง</strong> เมืองตรัง 92000</span> </a> </div></body></html> |
ผลลัพธ์
1. เตรียมรูปภาพ โดยอาจจะวาด หรือเขียนปุ่มปิดไว้ในรูปด้วยโปรแกรมให้เรียบร้อย ดังภาพตัวอย่าง
2. จากนั้นวาด Layer ลงในเว็บเพจ 1 Layer พร้อมตั้งชื่อ "ads" ดังภาพ
3. จากนั้นนำรูปภาพที่เตรียมไว้วางใส่ลงไปใน Layer ใช้ Hotspot สร้างส่วนที่จะให้ผู้ใช้กดปุ่มปิดหน้าต่าง ดังภาพ
4. เลือกเครื่องมือ Behaviors (Shift+F3)ใช้ Action เครื่องมือ Show-Hide Layers สั่งให้ซ่อน Layer "ads" ดังภาพ
5. จากนั้นให้สังเกตุที่เครื่องมือ Behaviorsสถานะของ Mouse อยู่ที่ onMouseOverให้เราทำการเปลี่ยนเป็น onClick ดังภาพ
ยังไม่ได้แก้ไข
แก้ไขแล้ว
6.จากนั้นก็ทำการใส่ Linkให้กับรูปภาพตามปกติ
7.ผลลัพธ์
2. Login เข้าเว็บไซต์ หาไม่ได้เป็นสมาชิก คลิก “ลงทะเบียน”และทำตามขั้นตอนการลงทะเบียน
4. กรอกข้อมูล และ คลิก Create app
5. คลิก อนุญาต เพื่อเข้าถึงข้อมูลส่วนตัวพื้นฐาน
6. จะได้ App ID เพื่อนำไปใส่ในโค้ด
7. ตัวอย่างโค้ด การใช้งาน เพื่อที่จะได้ facebook comment box
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Facebook new comment</title> <!-- หากต้องการให้สามารถจัดการ หรือดูแลรายการ comment ในหน้านั้นเลย สามารถกำหนด meta tag ดังนี้ --> <meta property="fb:admins" content="1234998873"/> <!-- หากต้องการให้สามารถจัดการ หรือดูแลรายการ comment ทั้งหมด สามารถกำหนด meta tag ดังนี้ <meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"> --> <meta property="fb:app_id" content="134358299911812"> </head> <body> <div id="fb-root"></div> <fb:comments href="http://www.ninenik.com/fb/face_newcomment.php" num_posts="3" width="500"> </fb:comments> <!-- href กำหนด url ของหน้าที่แสดง num_posts จำนวนที่ต้องการแสดง ต่อหนึ่งหน้า width ความกว้างที่ต้องการ --> <!-- <script src="http://connect.facebook.net/en_US/all.js#appId={YOUR_APPLICATION_ID}&xfbml=1"></script> --> <script src="http://connect.facebook.net/en_US/all.js#appId=134358299911812&xfbml=1"> </script> </body> </html> |
ผลลัพธ์ ดังนี้
