Blog tips เก็บ ๆ เค้ามา #9 ว่าด้วยภาพต่อ ว่าด้วยเรื่องภาพ ต่อ การแทรกภาพ แทรกโดยอาศัยคำสั่งนี้ครับ ครับ Image Source เป็นการกำหนดว่า ภาพที่เราจะแทรกมาจากแหล่งใด และกำหนด url ที่เราได้เก็บภาพไว้ อย่าลืมเครื่องหมายคำพูด (quotation mark) นะครับ จะใช้ " หรือ ' ก็พอแทนกันได้ แต่ที่ถูกต้องเป็น " ครับ การใส่ภาพนั้นเราสามารถใส่ไปในส่วนหนึ่งส่วนใดของข้อความ ใน link หรือแม้แต่ในตารางก็ได้ครับ ตัวอย่าง : link ไปยังหน้าสมุดเยี่ยม โดยท่านจะคลิ๊กได้ที่นี่ครับ ผลที่ได้ : link ไปยังหน้าสมุดเยี่ยม โดยท่านจะคลิ๊กได้ที่นี่ครับ ไม่ยากใช่ไหมครับ ทีนี้ มาดูเรื่องของภาพกันต่อ ขอยกตัวอย่างภาพนี้ไว้แล้วกันครับ กำหนดให้คุณหน้ายิ้มแหยมีชื่อภาพ yim.jpg นะครับ เกี่ยวกับขอบภาพ เรากำหนดลักษณะของกรอบภาพดังนี้ครับ ความหนาของกรอบ ใช้ tags คำสั่ง border="ขนาดเป็น pixels ที่ต้องการ" ลงไปในคำสั่งหลัง url ที่ระบุภาพครับ ตัวอย่าง : border="10"> ผลที่ได้ : ตำแหน่งภาพ ก็กำหนดโดยใช้ tag คำสั่ง align="ตำแหน่งที่ต้องการ" โดยมีตำแหน่งให้เลือกดังนี้ครับ การกำหนด align="left" ทำให้รูปภาพไปอยู่ด้านซ้ายมือของภาพ ดังที่เห็นนี้ครับ การกำหนด align="right" ทำให้รูปภาพไปอยู่ด้านขวามือของภาพ ดังที่เห็นนี้ครับ align="bottom" align="top" align="middle" พอได้ idea นะครับ ภาพกับเรื่อง สังเกตไหมครับว่า บางทีเราวางเรื่องลงไปแล้ว ตัวหนังสือจะไปชนกับขอบภาพเลย ทำให้อ่านดูไม่เป็นระเบียบ ไม่มีช่องไฟ ว่างั้นเหอะ ไม่ต้องกังวลครับ เรามีคำสั่งกีดกันข้อความไม่ให้เข้าถึงภาพของเราได้ โดยใช้คำสั่งกำหนดระยะห่าง vspace="ค่าที่ต้องการเป็น pixels" และ hspace="ค่าที่ต้องการเป็น pixels" ลงไปครับ โดยหมายถึง Vertical space และ Horizental space ตามลำดับคับ อ่า ขอยกตัวอย่างจากบทความเที่ยวไปงงไปของผมแล้วกันครับ ตัวอย่าง : ก่อนสงกรานต์ที่ผ่านมา ผมได้มีโอกาสไปเที่ยวญี่ปุ่นครับ งานนี้ไปเพื่อนชมดอกไม้เลย (Hana-mi : hana-ดอกไม้, mi-ชม, ดู) เพราะว่าซากุระจะออกดอกครับ เหมือนเช่นเคยนะครับ สำหรับผู้ที่ตามอ่านกระทู้เที่ยวไปงงไป ผู้ปกครองควรพิจารณา ห้ามนำไปอ้างอิงเด็ดขาด เอิ๊กส์ สำหรับการชมดอกไม้ เนื่องจากฤดูหนาวอันยาวนานจบไป ดอกไม้ต่าง ๆ ก็พากันออกดอกมาให้ชาวญี่ปุ่นชมกัน ดอกไม้ที่จะบาน หน้าตาคล้าย ๆ กันก็ได้แก่ บ้วย (อุเมะ Ume) ท้อหรือพิช (โมโม่-momo) แล้วก็ซากุระครับ คนทั่วไปมักจะจำผิดจำถูกเสมอว่าดอกอะไรกันแน่ แต่ว่าการบานจะเรียงกันมาตามนี้แหละครับ เห็นข้อแตกต่างไหมครับ ด้านซ้ายไม่ได้เว้น space ไว้ ส่วนด้านขวา เว้น space ไว้ จะเห็นว่า การเว้นช่องไฟทำให้คุณดูดีขึ้นจริง ๆ เอ๊ย ข้อความครับ ข้อความดูดีขึ้นจริง ๆ ทำ thumbnail ให้ภาพ คงจะนึกภาพออกนะครับ บางที ภาพที่เรามีใน blog หรือใน web ของเรามันใหญ่มาก ทำให้เวลาผู้เปิดเข้ามาอ่านนั้น load ได้ช้าลง โดยเฉพาะในบางรายที่บรรจุภาพไว้เยอะมาก ๆ เครื่องและเนตไม่แรง อาจทำให้เกิดอารมณ์พาลปิดหน้าไปซะงั้น อย่ากระนั้นเลย เรามาทำให้ภาพเป็น thumbnail กันดีกว่าครับ เมื่อจิ้มแล้วมันจะไปเปิดอีกหน้าหนึ่ง เช่นเดียวกับเวปภาพหวิว ๆ ที่ต้องคลิ๊กเพื่อชมภาพเต็มจอ หรือไม่ก็ในพันทิปนี่ล่ะครับ ภาพใหญ่มาก ๆ จะถูกสร้างเป็น link ไปอีกหน้าเลย เราต้องมี 2 ภาพ ก่อน ขอตั้งชื่อเป็น ยิ้มน้อย.gif กับ ยิ้มใหญ่.gif ก็แล้วกันครับ ยิ้มน้อย.gif ยิ้มใหญ่.gif และเราจะอ้าง link ไปยังภาพ ยิ้มใหญ่.gif ไปยังหน้าใหม่ (ใช้คำสั่ง ) โดยใส่ภาพเล็กที่เราต้องการลงไปข้างหลังเพื่อทำ link ครับ หรือเป็นดังนี้ ←อ้าง link ไปยังหน้าใหม่ ← ภาพthumbnail ที่ต้องการ ตัวอย่าง : ผลที่ได้ : สำหรับคนที่ต้องการแก้ตัว ก็อาจใส่คำสั่ง title="ข้อความที่จะแก้ตัว" ข้อความจะขึ้นมาเมื่อเราเอา mouse ไปวางแป๊บนึงครับ ตัวอย่าง : ผลที่ได้ : ทำ thumbnail ให้ภาพจำนวนมาก กรณีที่เราไปเที่ยวกลับมา ต้องการจะแทรกภาพเข้าไปจำนวนมากในหน้าของเรา แต่กว่าจะมีภาพมาครบคงต้องรอชาติหน้าสาย ๆ อะไรแบบนั้น วิธีแก้ง่าย ๆ ก็คือ ทำเป็น thumbnail ซะให้หมดครับ แล้วสร้างตารางเพื่อบรรจุ thumbnail เหล่านั้น ด้วยคำสั่งสร้างตาราง ดังนี้ครับ (จำ ๆ ไปก่อนนะครับ เดี๋ยวค่อยมาทำความเข้าใจการเขียนตารางอีกทีต่อไป ← การกำหนดตารางและลักษณะตาราง ← กำหนดแถวตาราง table row ← การจัดการข้อความใน cell แต่ละ cell ครับ ← ก็ แทรกรูปเล็ก link ไปภาพใหญ่เหมือนเดิมครับ ← คำสั่งปิดตารางแถวแรก ก็คำบรรยายที่ต้องการเหนือตารางน่ะครับ ใส่ข้อความข้างบนน่ะครับ <อ้าง linkไปภาพใหญ่>>แทรกภาพเล็ก> อย่าลืมทำให้เป็นบรรทัดเดียวกันล่ะครับ เดี๋ยวใช้การไม่ได้ ภาพ สำหรับใครต่อใครที่ได้ลงคำสั่งลบกรอบ ลบตารางไว้ ก็เสียใจด้วยครับที่มันจะไม่แสดงผลเลย หากว่าไม่ได้ทำไว้อาจจะได้ผลดีกว่าครับ การใช้ข้อความแสดงเผื่อภาพไม่ขึ้น กรณีที่อาจจะมีโอกาสที่ภาพจะไม่ขึ้นด้วยกรณีไหนก็ตาม ภาพอาจจะเป็นรูปเครื่องหมายผิดแดง ๆ น่ะครับ แต่ถ้าหากเราใช้คำสั่ง alt="..." ก็จะกลายเป็นข้อความแทนจะเป็นเครื่องหมายผิดได้ครับ คำสั่งนี้นั้น ขอแนะนำให้ใช้ทุกครั้งที่จะแทรกรูปครับ โดยอาจจะจัดให้เป็นชื่อภาพที่มี หรือใช้ข้อความทำนองว่า ภาพไม่สามารถแสดงผลได้ อะไรเทือกนี้น่ะครับ ตัวอย่าง : ถ้าต้องการมีกิ๊ก จิ้มที่ภาพเลยนะครับ ผลที่ได้ : ถ้าต้องการมีกิ๊ก จิ้มที่ภาพเลยนะครับ [สมุดเยี่ยม]   Create Date : 05 มิถุนายน 2548 11 comments Last Update : 2 ธันวาคม 2549 23:02:25 น. Counter : 2600 Pageviews. Share Tweet

เวปสีว๊านนหวานนะฮ๊าพี่ยู   โดย: koong(vivian) IP: 202.57.170.240 6 มิถุนายน 2548 21:16:39 น.

อ่านง่ายเฟ้ย ชิ ชิ   โดย: dont wanna no 6 มิถุนายน 2548 21:25:01 น.

ป้ามดพลาดหน้านี้ไปได้ไง และคนอื่นก็คงพลาดด้วย น่าเสียดายมากนะจาน จานต้องการ ปชส.ไหมคะ   โดย: ป้ามด 22 กรกฎาคม 2548 8:28:30 น.

เข้ามาหาความรู้ ค่ะ เผื่อแอบเอาอะไรไปใช้ได้บ้าง ไงๆ ก้ขออนุญาตไว้เลยนะคะ มือใหม่อยากทำ blog มั่วซะ blog ตัวเองจะเละแล้ว หนุกหนานๆๆๆ   โดย: ค้างคาว (Batgirl 2001 ) 16 กันยายน 2548 12:43:44 น.

อีกที อยากได้ ตัวน่ารัก แบบที่วิ่งอยู่บนกรอบ comment นี่แหละค่ะ กะข้อความที่กรอบ comment นี่ด้วย ช่วยหน่อยค้า   โดย: ค้างคาว (Batgirl 2001 ) 16 กันยายน 2548 12:46:05 น.

ช่วยใด้มากเลยเลยครับท่าน...ใช้ภาษาเข้าใจง่ายๆแบบนี้ดีมากๆครับ...ขอบคุณครับ นายdon't   โดย: mumen (mumen ) 1 ธันวาคม 2548 23:36:58 น.

โดย: VSr. 27 ธันวาคม 2548 11:26:10 น.

โดย: mim IP: 125.25.7.99 11 มีนาคม 2549 10:41:50 น.

โดย: ffgt IP: 61.19.22.67 18 สิงหาคม 2549 11:19:32 น.

มึนอ่ะ!ขอเวลาทำความเข้าใจก่อนนะคะ ฮู้!!!   โดย: ข้าวพอง 9 มกราคม 2550 18:04:44 น.

เชยหรือเปล่าคะที่พึ่งรู้จักพันทิป มาขออนุญาติบันทึกลงในปร็อกใหม่ค่ะ ทำไมเก่งจัง คุณด้องวานาโน เนี่ยย นับถือจริงๆ ขอบคุณอีกครั้งค่ะ   โดย: ELiiCA 15 มีนาคม 2550 6:51:01 น.