-`๏'- Thumbnails
Thumbnails
Thumbnails ก็คือ การทำภาพตัวอย่างให้เป็นลิ้งค์ที่ย่อส่วน เพื่อสะดวกในการเลือกชมภาพ เหมาะกับการนำเสนอที่มีภาพประกอบเป็นจำนวนมาก และภาพต้นฉบับมีขนาดใหญ่❒ หลักการแรกที่จำเป็นที่จะต้องเรียนรู้ในการทำ Thumbnails คือ การย่อขนาดภาพให้ได้สัดส่วน เพราะถ้ากรอบของ Thumbnails ไม่ได้ถูกกำหนดให้ได้สัดส่วน ผลที่ตามมาคือ ภาพใน Thumbnails จะบิดเบี้ยว ซึ่งนอกจากจะดูไม่สวยงามแล้ว อาจทำให้เข้าใจผิดได้ว่าภาพต้นฉบับก็คงมีลักษณะเช่นเดียวกันกับภาพใน Thumbnails ซึ่งเราสามารถใช้โปรแกรมตกแต่งภาพ เช่น Photoshop ฯลฯ ช่วยในการคำนวณสัดส่วนของภาพที่เราจะนำมาทำ Thumbnails ได้ ❒ หลักการต่อมาก็คงเป็นเรื่องลิ้งค์ของภาพที่จะแบ่งออกเป็นสองส่วนคือ ลิ้งค์ที่เป็นภาพ Thumbnails กับลิ้งค์ที่เป็นภาพ Original Size นั่นเอง
Nature Nov.26,05-Sep.21,05 (Click images to Enlarge.) More>> Nov.26,05 Nov.06,05 Nov.03,05 Oct.28,05 Oct.25,05 Oct.09,05 Oct.04,05 Oct.02,05 Oct.01,05 Sep.29,05 Sep.26,05 Sep.21,05 More>>
❒ ตัวอย่างข้างบนนี้ เป็นภาพจริงขนาดกว้าง 800px สูง 600px รายละเอียดของโค้ด <p align=center><table border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"> Nature </td> </tr> <tr> <td colspan="3" class="thumbnails"> Nov.26,05-Sep.21,05 (Click images to Enlarge.) </td> <td align="right" colspan="1" class="thumbnails"> More<a href="//..."> >> </a> </td> </tr> <tr> <td colspan="4" align="center" width="450"> <img src="//..." border="0" width="450" height="4"> </td> </tr> <tr> <td colspan="4" align="center" width="450" height="10"> </td> </tr> <tr> <td align="center" class="thumbnails" valign="top" width="120" height="90"> ข้อความ<a href="//img01"> <img src="//th01" border="0" width="74" height="50" vspace="5"> </td> <td align="center" class="thumbnails" valign="top" width="120" height="90"> ข้อความ<a href="//img02"> <img src="//th02" border="0" width="74" height="50" vspace="5"> </td> <td align="center" class="thumbnails" valign="top" width="120" height="90"> ข้อความ<a href="//img03"> <img src="//th03" border="0" width="74" height="50" vspace="5"> </td> <td align="center" class="thumbnails" valign="top" width="120" height="90"> ข้อความ<a href="//img04"> <img src="//th04" border="0" width="74" height="50" vspace="5"> </td> </tr> <tr> <td align="center" class="thumbnails" valign="top" width="120" height="90"> ข้อความ<a href="//img05"> <img src="//th05" border="0" width="74" height="50" vspace="5"> </td> <td align="center" class="thumbnails" valign="top" width="120" height="90"> ข้อความ<a href="//img06"> <img src="//th06" border="0" width="74" height="50" vspace="5"> </td> <td align="center" class="thumbnails" valign="top" width="120" height="90"> ข้อความ<a href="//img07"> <img src="//th07" border="0" width="74" height="50" vspace="5"> </td> <td align="center" class="thumbnails" valign="top" width="120" height="90"> ข้อความ<a href="//img08"> <img src="//th08" border="0" width="74" height="50" vspace="5"> </td> </tr> <tr> <td align="center" class="thumbnails" valign="top" width="120" height="90"> ข้อความ<a href="//img09"> <img src="//th09" border="0" width="74" height="50" vspace="5"> </td> <td align="center" class="thumbnails" valign="top" width="120" height="90"> ข้อความ<a href="//img10"> <img src="//th10" border="0" width="74" height="50" vspace="5"> </td> <td align="center" class="thumbnails" valign="top" width="120" height="90"> ข้อความ<a href="//img11"> <img src="//th11" border="0" width="74" height="50" vspace="5"> </td> <td align="center" class="thumbnails" valign="top" width="120" height="90"> ข้อความ<a href="//img12"> <img src="//th12" border="0" width="74" height="50" vspace="5"> </td> </tr> <tr> <td colspan="4" align="center" width="450" height="10"> </td> </tr> <tr> <td colspan="4" align="center" width="450"> <img src="//..." border="0" width="450" height="4"> </td> </tr> <tr> <td colspan="4" align="right" class="thumbnails"> More<a href="//..."> >> </a> </td> </tr> </table> </p> ❒ โค้ดยาวหน่อย แต่..ถ้าใครตามเนื้อหามาตั้งแต่ (-`๏'- บลอกสไตล์?!) ก็คงทำความเข้าใจไม่ยากนัก ตรงนี้ขออธิบายเป็นภาพรวมแล้วกัน <table border="0" cellpadding="0" cellspacing="0"> .... </table> : ส่วนของตาราง (Table) <tr> .... </tr> : ส่วนของแถว (Row) <td align="center" class="thumbnails" valign="top" width="120" height="90"> .... </td> : ส่วนของคอลัมน์ (Column) <a href="//img(01-12)"> : ส่วนของลิ้งค์ภาพต้นฉบับ (Original Size) <img src="//th(01-12)" border="0" width="74" height="50" vspace="5"> : ส่วนของลิ้งค์ภาพ Thumbnails ถ้าต้องการคลิกลิ้งค์แล้วเป็นการเปิดเพจใหม่ ให้เติมข้อความ target='_blank' หลังลิ้งค์ดังนี้ <a href="//img(01-12)" target='_blank' > More<a href="//..."> : ลิ้งค์หลังข้อความคำว่า More คือส่วนอ้างอิงหน้าถัดไป เราอาจใช้คำว่า Next ก็ได้ ในกรณีต้องการสร้างปุ่ม Previous (มีหลายเพจ) ให้แทนคำสั่งคอลัมน์ ดังต่อไปนี้แทนที่ตำแหน่งของ More (เดิม)<td align="left" class="thumbnails"> <a href="//..."> << </a> Previous</td> <td align="right" class="thumbnails"> Next (More)<a href="//..."> >> </a> </td>
คงพอเป็นแนวทางให้ผู้ที่สนใจรูปแบบนี้ได้ไม่มากก็น้อย ใครมีไอเดียสร้างสรรอย่างไรก็บรรเลงกันเองให้เต็มที่ไปเลย เพลง : ครึ่งหนึ่งของชีวิต ศิลปิน : แอม เสาวลักษณ์ ลีลาบุตร
Create Date : 04 ธันวาคม 2548
Last Update : 7 มกราคม 2549 21:20:37 น.
32 comments
Counter : 6088 Pageviews.
โดย: Petit Patty วันที่: 4 ธันวาคม 2548 เวลา:0:37:49 น.
โดย: Petit Patty วันที่: 4 ธันวาคม 2548 เวลา:0:39:34 น.
โดย: p_tham วันที่: 4 ธันวาคม 2548 เวลา:0:46:16 น.
โดย: อินทรีทองคำ วันที่: 4 ธันวาคม 2548 เวลา:0:47:46 น.
โดย: Petit Patty วันที่: 4 ธันวาคม 2548 เวลา:0:50:21 น.
โดย: Petit Patty วันที่: 4 ธันวาคม 2548 เวลา:1:03:32 น.
โดย: อินทรีทองคำ วันที่: 4 ธันวาคม 2548 เวลา:1:29:41 น.
โดย: JewNid วันที่: 4 ธันวาคม 2548 เวลา:1:43:54 น.
โดย: นู๋ส้มจุก วันที่: 4 ธันวาคม 2548 เวลา:6:45:02 น.
โดย: ตี๋น้อย (Zantha ) วันที่: 4 ธันวาคม 2548 เวลา:6:47:14 น.
โดย: tukata001 วันที่: 4 ธันวาคม 2548 เวลา:9:45:19 น.
โดย: อินทรีทองคำ วันที่: 4 ธันวาคม 2548 เวลา:10:33:49 น.
โดย: adia วันที่: 4 ธันวาคม 2548 เวลา:12:45:15 น.
โดย: Bee1st วันที่: 4 ธันวาคม 2548 เวลา:13:16:07 น.
โดย: erina วันที่: 4 ธันวาคม 2548 เวลา:14:11:39 น.
โดย: อินทรีทองคำ วันที่: 4 ธันวาคม 2548 เวลา:15:45:46 น.
โดย: Petit Patty วันที่: 4 ธันวาคม 2548 เวลา:16:43:53 น.
โดย: Petit Patty วันที่: 4 ธันวาคม 2548 เวลา:18:51:38 น.
โดย: yadegari วันที่: 4 ธันวาคม 2548 เวลา:18:52:31 น.
โดย: อินทรีทองคำ วันที่: 4 ธันวาคม 2548 เวลา:18:53:26 น.
โดย: อินทรีทองคำ วันที่: 4 ธันวาคม 2548 เวลา:21:29:50 น.
โดย: yadegari วันที่: 4 ธันวาคม 2548 เวลา:21:30:50 น.
โดย: ju (กระจ้อน ) วันที่: 4 ธันวาคม 2548 เวลา:21:47:39 น.
โดย: Petit Patty วันที่: 4 ธันวาคม 2548 เวลา:22:40:33 น.
โดย: ชมรมรักพี่แอม IP: 203.114.112.5 วันที่: 18 พฤษภาคม 2549 เวลา:15:51:01 น.
โดย: ณัฐพล ประมา IP: 1.2.244.134 วันที่: 23 พฤศจิกายน 2555 เวลา:13:31:22 น.
พี่แพทเปิดตัวบล๊อคใหม่ที่น้องไหมคอยช่วยเหลือและให้คำแนะนำมาตลอดเวลาแล้วจ้า
มาบอกน้องไหมคนแรกเลย .... เดี๋ยวต้องไปบอกคุณปลาอีกคน