Bloggang.com : dont wanna no : Blog tips เก็บ ๆ เค้ามา #9 ว่าด้วยภาพต่อ

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="..." ก็จะกลายเป็นข้อความแทนจะเป็นเครื่องหมายผิดได้ครับ

คำสั่งนี้นั้น ขอแนะนำให้ใช้ทุกครั้งที่จะแทรกรูปครับ โดยอาจจะจัดให้เป็นชื่อภาพที่มี หรือใช้ข้อความทำนองว่า ภาพไม่สามารถแสดงผลได้ อะไรเทือกนี้น่ะครับ

ตัวอย่าง :
ถ้าต้องการมีกิ๊ก จิ้มที่ภาพเลยนะครับ

ผลที่ได้ :
ถ้าต้องการมีกิ๊ก จิ้มที่ภาพเลยนะครับ ภาพที่ว่าผมยังหาไม่ได้เลยครับ คิดว่าหาได้จะแบ่งให้ใครเหรอครับ เอิ๊กส์