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
Last Update : 2 ธันวาคม 2549 23:02:25 น.
Counter : 1711 Pageviews.

11 comments
พิพิธภัณฑ์ท้องถิ่นวัดหนองขุนชาติ อ.หนองฉาง จ.อุทัยธานี สองแผ่นดิน
(2 ม.ค. 2564 21:16:12 น.)
4 วัน 3 คืน เที่ยวกระบี่ ดินแดนแห่งธรรมชาติจากผืนป่าสู่ท้องทะเลงาม (ตอนที่ 4: ทัวร์สี่เกาะ+ทะเลแหวก) เจ้าสำนักคันฉ่องวารี
(12 ม.ค. 2564 22:12:33 น.)
✿ ✿ Food For Fun :: Hot Wok Return #55 :: อาหารผู้สูงวัย "แกงจืดผักกาดขาวม้วนไส้หมูสับ" ✿ ✿ เนินน้ำ
(12 ม.ค. 2564 08:30:50 น.)
10 มค 64 นางพญาเสือโคร่ง - Wild Himalayan Cherry mcayenne94
(10 ม.ค. 2564 21:47:42 น.)
  
เวปสีว๊านนหวานนะฮ๊าพี่ยู
โดย: 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 น.
ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
 *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

Dontno-trips-confused.BlogGang.com

dont wanna no
Location :
  

[ดู Profile ทั้งหมด]
 ผู้ติดตามบล็อก : 2 คน [?]