Blog tips เก็บ ๆ เค้ามา #9 ว่าด้วยภาพต่อ ว่าด้วยเรื่องภาพ ต่อ การแทรกภาพ แทรกโดยอาศัยคำสั่งนี้ครับ Image Source เป็นการกำหนดว่า ภาพที่เราจะแทรกมาจากแหล่งใด และกำหนด url ที่เราได้เก็บภาพไว้ อย่าลืมเครื่องหมายคำพูด (quotation mark) นะครับ จะใช้ " หรือ ' ก็พอแทนกันได้ แต่ที่ถูกต้องเป็น " ครับ การใส่ภาพนั้นเราสามารถใส่ไปในส่วนหนึ่งส่วนใดของข้อความ ใน link หรือแม้แต่ในตารางก็ได้ครับ ตัวอย่าง : link ไปยังหน้าสมุดเยี่ยม โดยท่านจะคลิ๊กได้ที่นี่ครับ ผลที่ได้ : link ไปยังหน้าสมุดเยี่ยม โดยท่านจะคลิ๊กได้ที่นี่ครับ  ไม่ยากใช่ไหมครับ ทีนี้ มาดูเรื่องของภาพกันต่อ ขอยกตัวอย่างภาพนี้ไว้แล้วกันครับ กำหนดให้คุณหน้ายิ้มแหยมีชื่อภาพ yim.jpg นะครับ  เกี่ยวกับขอบภาพ เรากำหนดลักษณะของกรอบภาพดังนี้ครับ ความหนาของกรอบ ใช้ tags คำสั่ง border="ขนาดเป็น pixels ที่ต้องการ" ลงไปในคำสั่งหลัง url ที่ระบุภาพครับ ตัวอย่าง :  border="10">ผลที่ได้ : ตำแหน่งภาพ ก็กำหนดโดยใช้ tag คำสั่ง align="ตำแหน่งที่ต้องการ" โดยมีตำแหน่งให้เลือกดังนี้ครับ
พอได้ idea นะครับ ภาพกับเรื่อง สังเกตไหมครับว่า บางทีเราวางเรื่องลงไปแล้ว ตัวหนังสือจะไปชนกับขอบภาพเลย ทำให้อ่านดูไม่เป็นระเบียบ ไม่มีช่องไฟ ว่างั้นเหอะ ไม่ต้องกังวลครับ เรามีคำสั่งกีดกันข้อความไม่ให้เข้าถึงภาพของเราได้ โดยใช้คำสั่งกำหนดระยะห่าง vspace="ค่าที่ต้องการเป็น pixels" และ hspace="ค่าที่ต้องการเป็น pixels" ลงไปครับ โดยหมายถึง Vertical space และ Horizental space ตามลำดับคับ อ่า ขอยกตัวอย่างจากบทความเที่ยวไปงงไปของผมแล้วกันครับ ตัวอย่าง :
เห็นข้อแตกต่างไหมครับ ด้านซ้ายไม่ได้เว้น space ไว้ ส่วนด้านขวา เว้น space ไว้ จะเห็นว่า การเว้นช่องไฟทำให้คุณดูดีขึ้นจริง ๆ เอ๊ย ข้อความครับ ข้อความดูดีขึ้นจริง ๆ ทำ thumbnail ให้ภาพ คงจะนึกภาพออกนะครับ บางที ภาพที่เรามีใน blog หรือใน web ของเรามันใหญ่มาก ทำให้เวลาผู้เปิดเข้ามาอ่านนั้น load ได้ช้าลง โดยเฉพาะในบางรายที่บรรจุภาพไว้เยอะมาก ๆ เครื่องและเนตไม่แรง อาจทำให้เกิดอารมณ์พาลปิดหน้าไปซะงั้น อย่ากระนั้นเลย เรามาทำให้ภาพเป็น thumbnail กันดีกว่าครับ เมื่อจิ้มแล้วมันจะไปเปิดอีกหน้าหนึ่ง เช่นเดียวกับเวปภาพหวิว ๆ ที่ต้องคลิ๊กเพื่อชมภาพเต็มจอ หรือไม่ก็ในพันทิปนี่ล่ะครับ ภาพใหญ่มาก ๆ จะถูกสร้างเป็น link ไปอีกหน้าเลย เราต้องมี 2 ภาพ ก่อน ขอตั้งชื่อเป็น ยิ้มน้อย.gif กับ ยิ้มใหญ่.gif ก็แล้วกันครับ   และเราจะอ้าง link ไปยังภาพ ยิ้มใหญ่.gif ไปยังหน้าใหม่ (ใช้คำสั่ง ) โดยใส่ภาพเล็กที่เราต้องการลงไปข้างหลังเพื่อทำ link ครับ หรือเป็นดังนี้ ←อ้าง link ไปยังหน้าใหม่ ตัวอย่าง :  ผลที่ได้ : สำหรับคนที่ต้องการแก้ตัว ก็อาจใส่คำสั่ง title="ข้อความที่จะแก้ตัว" ข้อความจะขึ้นมาเมื่อเราเอา mouse ไปวางแป๊บนึงครับ ตัวอย่าง : ผลที่ได้ : ทำ thumbnail ให้ภาพจำนวนมาก กรณีที่เราไปเที่ยวกลับมา ต้องการจะแทรกภาพเข้าไปจำนวนมากในหน้าของเรา แต่กว่าจะมีภาพมาครบคงต้องรอชาติหน้าสาย ๆ อะไรแบบนั้น วิธีแก้ง่าย ๆ ก็คือ ทำเป็น thumbnail ซะให้หมดครับ แล้วสร้างตารางเพื่อบรรจุ thumbnail เหล่านั้น ด้วยคำสั่งสร้างตาราง ดังนี้ครับ (จำ ๆ ไปก่อนนะครับ เดี๋ยวค่อยมาทำความเข้าใจการเขียนตารางอีกทีต่อไป
อย่าลืมทำให้เป็นบรรทัดเดียวกันล่ะครับ เดี๋ยวใช้การไม่ได้
สำหรับใครต่อใครที่ได้ลงคำสั่งลบกรอบ ลบตารางไว้ ก็เสียใจด้วยครับที่มันจะไม่แสดงผลเลย หากว่าไม่ได้ทำไว้อาจจะได้ผลดีกว่าครับ การใช้ข้อความแสดงเผื่อภาพไม่ขึ้น กรณีที่อาจจะมีโอกาสที่ภาพจะไม่ขึ้นด้วยกรณีไหนก็ตาม ภาพอาจจะเป็นรูปเครื่องหมายผิดแดง ๆ น่ะครับ แต่ถ้าหากเราใช้คำสั่ง alt="..." ก็จะกลายเป็นข้อความแทนจะเป็นเครื่องหมายผิดได้ครับ คำสั่งนี้นั้น ขอแนะนำให้ใช้ทุกครั้งที่จะแทรกรูปครับ โดยอาจจะจัดให้เป็นชื่อภาพที่มี หรือใช้ข้อความทำนองว่า ภาพไม่สามารถแสดงผลได้ อะไรเทือกนี้น่ะครับ ตัวอย่าง : ถ้าต้องการมีกิ๊ก จิ้มที่ภาพเลยนะครับ ผลที่ได้ : ถ้าต้องการมีกิ๊ก จิ้มที่ภาพเลยนะครับ
เวปสีว๊านนหวานนะฮ๊าพี่ยู
 โดย: koong(vivian) IP: 202.57.170.240 วันที่: 6 มิถุนายน 2548 เวลา:21:16:39 น.
ป้ามดพลาดหน้านี้ไปได้ไง และคนอื่นก็คงพลาดด้วย น่าเสียดายมากนะจาน
จานต้องการ ปชส.ไหมคะ โดย: ป้ามด
 วันที่: 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 น.   โดย: mim IP: 125.25.7.99 วันที่: 11 มีนาคม 2549 เวลา:10:41:50 น.
       โดย: ffgt IP: 61.19.22.67 วันที่: 18 สิงหาคม 2549 เวลา:11:19:32 น.
เชยหรือเปล่าคะที่พึ่งรู้จักพันทิป
มาขออนุญาติบันทึกลงในปร็อกใหม่ค่ะ ทำไมเก่งจัง คุณด้องวานาโน เนี่ยย นับถือจริงๆ ขอบคุณอีกครั้งค่ะ โดย: ELiiCA
วันที่: 15 มีนาคม 2550 เวลา:6:51:01 น. |
บทความทั้งหมด
|
|||||||||||||||||||||||||||||||
 |
|
ผู้ติดตามบล็อก : 2 คน [