การใช้ภาพมาสร้างเป็นเส้น




การใช้ภาพสร้างเส้น



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

แต่หากเราต้องการสร้างเส้นที่มีลูกเล่นมากกว่าสีพื้น ๆ แบบนั้น เราอาจจะใช้ภาพขนาดเล็ก ๆ ไม่กี่ pixel มาทำให้เกิดเป็นเส้นได้ ด้วยการใช้คำสั่งเดิม ๆ ของเราครับ คือ การแทรกภาพแต่ว่าเราจะระบุ ความกว้าง (width) และ ความสูงหรือความยาว (height) ลงไปด้วย



คำสั่งที่ใช้คือ




url ของภาพที่เราจะทำให้เส้น" width="จำนวน pixel ที่เราต้องการ หรือเป็น % ของหน้าต่างก็ได้ height="จำนวน pixel ที่เราต้องการ หรือเป็น % ของหน้าต่าง ">



กรณีนี้ก็ใช้ภาพที่เป็นสีพื้นเอาครับ กรณีที่บาง browser มันแสดงสีที่เราต้องการไม่ได้ ก็เอาภาพที่เป็นสีพื้นที่เราต้องการมาทำแบบนี้ล่ะครับ


แต่ถ้าเราต้องการลวดลายวิจิตรพิสดาร ก็อาจจะใช้ bullet ก็อาจจะใส่คำสั่งแทรกภาพไปเท่ากับความกว้างของ bullet ก็ได้ครับ


เอา bullet แบบนี้ มาทำเส้นนะครับ bullet จะมีขนาด 11x11 pixels



ตัวอย่าง :


















ผลที่ได้ :





เอา bullet แบบนี้ ซึ่งมีขนาด 17x17 pixels มาทำเส้นแนวตั้งนะครับ แบบนี้จำเป็นต้องอาศัยการจัดหน้า และ tags คำสั่งเว้นบรรทัด
นิดหน่อยครับ



ตัวอย่าง : (อาจจะดูลายตา แต่คือแทรกภาพไป 20 ภาพนั่นล่ะครับ)

&p align="center">









































ผลที่ได้ :

























ข้อแนะนำ

  1. ถ้าหากกำหนดความกว้างมากกว่าความยาว ก็จะได้เส้นแนวนอน
  2. ถ้าต้องการเส้นแนวตั้ง ก็กำหนดความสูงให้มากกว่าความกว้าง
  3. ถ้าต้องการให้เป็นเส้น ก็กำหนดค่าให้เท่ากับขนาดของภาพไปเลยครับ เช่น กว้าง 2 pixels ยาว 200 pixels ก็ได้เส้นแนวนอน200 pixels มา
  4. ภาพที่นำมาใช้ก็เอา bullet มาใช้ก็ได้ครับ
  5. ประโยชน์ก็คือ เราจะได้เส้นที่สีแปลก หรือจัดจ้าน หรือมี texture และลูกเล่นที่ไม่มีใครเหมือนไงครับ
  6. ไม่ต้องคิดว่า ยาวขนาดนี้ ชั้นไม่ พิมพ์ ซะให้ยากนะครับ เพราะผมก็ copy และ paste เอาครับ ง่ายมาก 5 5 5






[ถามมาก็ตอบไป]  [สมุดเยี่ยม]







Create Date : 23 มิถุนายน 2548
Last Update : 2 ธันวาคม 2549 23:36:24 น.
Counter : 2409 Pageviews.

17 comments
:: กะก๋าแนะนำหนังสือ - โจน :: กะว่าก๋า
(8 ม.ค. 2564 06:29:08 น.)
:: กะก๋าแนะนำหนังสือ - รัก โลก :: กะว่าก๋า
(10 ม.ค. 2564 06:40:54 น.)
อุทยานแห่งชาติ รามคำแหง พายุสุริยะ
(7 ม.ค. 2564 18:02:14 น.)
夫妻比强 Fūqī bǐ qiáng สามีภรรยาใครดีกว่ากัน Kavanich96
(4 ม.ค. 2564 04:15:51 น.)
  
ขอคาราวะ
โดย: Angel Tanya วันที่: 23 มิถุนายน 2548 เวลา:0:37:55 น.
  
ขอคาวาระ...
โดย: Nutty Professor วันที่: 23 มิถุนายน 2548 เวลา:0:46:01 น.
  
คาราวะด้วย
โดย: แบ่งปัญญ์ วันที่: 23 มิถุนายน 2548 เวลา:0:51:18 น.
  
โดย: zaesun วันที่: 23 มิถุนายน 2548 เวลา:2:50:02 น.
  



ขอบคุณค๊าบบบ

โดย: แม่สาย วันที่: 23 มิถุนายน 2548 เวลา:2:50:44 น.
  
ขอบคุณค่า ^^



...
โดย: ขอบคุณที่รักกัน (blueberry_cpie ) วันที่: 23 มิถุนายน 2548 เวลา:7:09:18 น.
  
เยี่ยมเลยค่ะ
โดย: ยัยแก้มบุ๋ม : ) วันที่: 23 มิถุนายน 2548 เวลา:8:24:29 น.
  
ตามมาดูอีกแล้ว ค่ะ..
โดย: ไม่รักไม่มา ...Naka วันที่: 23 มิถุนายน 2548 เวลา:14:22:59 น.
  
เห็นท่านอื่นขอคารวะ งั้นผมขอคารบาวแล้วกัน (ขำมั้ยเนี่ย)
ดูคำสั่งแล้วตาลายเลยครับ เก็บเข้าคลังความรู้ละกัน อิอิ
โดย: Mint@da{-"-} วันที่: 23 มิถุนายน 2548 เวลา:20:38:36 น.
  
วันนี้นั่งเรียนตรงนี้ค่ะ
โดย: ป้ามด วันที่: 22 กรกฎาคม 2548 เวลา:10:50:20 น.
  


งึม ๆ ถ้าใช้ table fix ขนาดความสูงแล้วกำหนดพื้นหลังเป็นรูป จะง่ายกว่าครับ : )

โดย: ยาจก IP: 202.44.135.34 วันที่: 29 กรกฎาคม 2548 เวลา:0:57:33 น.
  
จริงครับ เห็นด้วย ขอบคุณมาก
โดย: dont wanna no วันที่: 2 สิงหาคม 2548 เวลา:18:55:17 น.
  
แวะมาเยี่ยมเจ้าค่ะ
บ้านนี้มีของแจกเสมอๆเลยนะคะ ดีจังค่ะ
โดย: ป้าแจ๋วแหวว วันที่: 6 ตุลาคม 2548 เวลา:21:06:38 น.
  
ได้ความรู้ไปใส่กระโหลกอีกเยอะเลย ครับ


โดย: พี่ป๊อด (พี่ป๊อด ) วันที่: 20 ตุลาคม 2549 เวลา:0:24:12 น.
  
ได้ง่ะความรู้ ..
ได้จริงๆ

แต่ทำไมทำไม่ได้อ้ะ ..


รบกวนมาช่วย .. ให้ปรึกษาด้วยค๊าบบบบ
โดย: มะเทะ (pass&Forward ) วันที่: 1 พฤศจิกายน 2549 เวลา:14:58:18 น.
  
ง่ะ..

ได้แล้ว ..

แตj bLackGounD ยังไม่ได้ง่ะ
..

ยังจะขอบรบกวนต่อเนาะ
โดย: มะเทะ (pass&Forward ) วันที่: 1 พฤศจิกายน 2549 เวลา:15:00:36 น.
  
แวะมาเก็บไปลองทำค่ะ

ขอคารวะ 1 ครั้ง
โดย: Jikkyjang วันที่: 18 มิถุนายน 2550 เวลา:10:51:43 น.
ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
 *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

Dontno-trips-confused.BlogGang.com

dont wanna no
Location :
  

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