ReadyPlanet.com
dot

dot
เลือกเวอร์ชั่น Text Editor
Editor Manual
แนะนำวิธีทำเว็บไซต์เบื้องต้น
Function Update
dot
dot
เว็บไซต์รูปแบบ Responsive web design
จัดการเมนูหลัก
เมนูโค้ดและสคริปต์ภายใต้ <head>
ประวัติการใช้งานระบบ
ตัวนับผู้ชมเว็บ
Google Service/Sitemap
จัดการอีเมลสมัครรับข่าวสาร
dot
dot
ระบบผู้ช่วย
ระบบ Chat
dot
dot
การตั้งอีเมล Pop Mail
dot
dot
bulletจัดการเว็บไซต์
bulletระบบพื้นฐาน
bulletระบบเสริม
bulletบริการสมาชิก
bulletเทคนิคอื่นๆ
bulletText Editor
dot
dot
bulletจัดการแบบฟอร์มติดต่อกลับ


สร้างลิงก์รูปภาพเล็กไปรูปภาพใหญ่ ด้วยเครื่องมือ Text Editor

ท่านสมาชิก ReadyPlanet หลายท่าน ที่ต้องการแสดงผลรูปภาพขนาดต้นฉบับ ซึ่งมีขนาดค่อนข้างกว้างในหน้าเว็บไซต์สำเร็จรูป ทำให้พบปัญหาหน้าเว็บไซต์ขยายกว้างเกินไป  ReadyPlanet มีวิธีแก้ปัญหามาแนะนำค่ะ โดยการทำลิงก์จากภาพขนาดเล็ก ให้ผู้อ่านสามารถคลิกชมภาพขนาดใหญ่ โดยมีขั้นตอนดังนี้


1. Log in เข้าส่วนสมาชิก ที่เมนู "ระบบพื้นฐาน" คลิก "จัดการกลุ่มบทความ / บทความ" (หรือเมนูอื่น ๆ ที่ต้องการเพิ่มรูปภาพเพื่อผูกลิงก์จากภาพเล็กไปยังภาพใหญ่ค่ะ)

 

2. เข้าสู่หน้า "จัดการกลุ่มบทความ / บทความ" คลิกที่ชื่อกลุ่มบทความ จากนั้นคลิก  เพื่อเพิ่มบทความใหม่ หรือคลิก  เพื่อแก้ไขบทความเดิมที่สร้างไว้แล้วตามต้องการ

 

3. คลิกแท็บ "เนื้อหาของบทความ" คลิกเลือกคำสั่ง  (Upload Image) เพื่อเพิ่มรูปภาพ

 

4. จะปรากฎหน้าต่าง "Image Properties" คลิกที่ปุ่ม "Browse Server"

 

5. ปรากฎหน้าต่าง FCKeditor - Resources Browser  - Windows Internet Explorer 

     5.1. คลิกปุ่ม Browse เพื่อเลือกรูปภาพที่ต้องการ

     5.2. ปรากฎหน้าต่าง "Choose File to Upload" คลิกเลือกรูปภาพ  (รูปภาพจะต้องมีขนาดไม่เกิน 500 Kb และชื่อภาพเป็นภาษาอังกฤษหรือตัวเลขเท่านั้น)

     5.3. คลิกปุ่ม "Open"

     5.4. คลิกปุ่ม Upload

 

6. หลังจากคลิก Upload จะปรากฏรูปภาพที่คุณเลือก ให้คลิกที่รูปภาพ



7. รูปภาพที่ Upload มาจะปรากฎในช่อง Preview ให้คุณกำหนดขนาดของภาพให้มีขนาดเล็กลง โดยกำหนดค่าในช่อง Width (ความกว้าง) และ Height (ความสูง) ตัวอย่างเช่น ภาพต้นฉบับมีขนาด 960x99 pixels ทำการย่อขนาดโดยกำหนดให้ความกว้างและความสูงเป็น 500x52 pixels เป็นต้น  จากนั้นทำการ Copy URL ของภาพจากช่อง URL และคลิก ตกลง ดังรูป


8. แสดงรูปภาพที่ได้จากการ Upload ในเนื้อหาของบทความ จากนั้น ให้คลิกที่รูปภาพ และคลิกที่คำสั่ง  (Hyperling in Text) เพื่อสร้างลิงค์

 

9. ปรากฎหน้าต่าง Link ให้วาง URL ของภาพต้นฉบับ ที่ copy มาในช่อง URL

 

คลิกแท็บ "Target" เป็น "New Window (_blank)" และคลิก OK

 

10. คุณสามารถใส่เนื้อหารายละเอียดอื่น ๆ ในส่วนเนื้อหาบทความเพิ่มเติมตามปกติ และคลิก "ตกลง" เพื่อบันทึกบทความค่ะ

 

ตัวอย่างการแสดงผลการลิงก์จากรูปภาพเล็กไปรูปภาพใหญ่บนหน้าเว็บไซต์

 

ชมตัวอย่างการแสดงผลการลิงก์จากภาพเล็กไปภาพขนาดใหญ่ คลิกที่ภาพด้านล่างนี้ค่ะ


 

 

Jittima  Suebsook
www.ReadyPlanet.com




วิธีใส่ข้อมูลและตกแต่งเว็บไซต์สำเร็จรูป ReadyPlanet เบื้องต้น

เตรียมข้อมูลทำเว็บไซต์อย่างไรดี
เริ่มต้นใส่ข้อมูลในระบบเว็บไซต์สำเร็จรูป
วิธีใส่รูปภาพในเนื้อหาของเว็บไซต์
วิธีอัพโหลดไฟล์เอกสารและสร้างลิงก์สำหรับดาวน์โหลด
วิธีสร้างลิงก์ให้กับข้อความและรูปภาพ
การเลือกรูปแบบเว็บไซต์ (Template) และจัดโครงสร้างหน้าแรก (Layout)
เทคนิคการจัดการเมนูหลักที่สวยและดี
จัดการข้อมูลเมนูย่อยด้านข้างอย่างไรดี?
เลือกใช้สีในหน้าเว็บไซต์อย่างไรให้เหมาะสม?
ข้อควรระวังในการทำเว็บไซต์และวิธีใส่ข้อมูลในเว็บไซต์ที่ถูกต้องปลอดภัย article
4 วิธี เคลียร์เนื้อหายาวๆ ในเว็บไซต์ ให้น่าอ่าน
ติดต่อง่าย เก็บได้ข้อมูลดังใจกับ "แบบฟอร์มอิสระติดต่อกลับ"
ไม่พลาดการติดต่อด้วย "แบบฟอร์มมาตรฐาน"
ย่อรูปภาพอย่างง่ายด้วยเครื่องมือ "กำหนดขนาดรูปภาพ"
สร้างรูปภาพเคลื่อนไหวแบบ Marquee
วิธีสร้างไฟล์ภาพ Favorite Icon เพื่อแสดงผลในช่อง Address Bar
เทคนิคการสร้างลิงค์ ในหน้าเดียวกันด้วยคำสั่ง Anchor
เทคนิคการสร้างลิงก์เมนูและรูปภาพแบนเนอร์ ในพื้นที่ด้านล่างของเว็บไซต์
วิธีใส่คีย์เวิร์ดในเว็บไซต์เพื่อให้ Google จัดเว็บไซต์ในอันดับที่ดี
วิธีติดตั้ง Facebook Page Plugin (Like Box) ในเว็บไซต์
วิธีแสดงผลเครื่องเล่น VDO บนหน้าเว็บไซต์
5 องค์ประกอบของเว็บไซต์ที่ดี
5 สิ่งที่ต้องมี บนโฮมเพจเว็บไซต์
แนะนำโปรแกรมตกแต่งและใส่กรอบรูปภาพฟรี! ใช้ง่าย นำไปแต่งเว็บให้โดดเด่นได้เลย
ใช้ระบบ Chat บนหน้าเว็บไซต์ ช่วยถามตอบทุกข้อสงสัย พร้อมเพิ่มโอกาสปิดการขายได้มากกว่า
โชว์เส้นทาง สร้างแผนที่บนเว็บไซต์ง่ายๆ ใช้ Google Map
Google Verification (วิธียืนยันการเป็นเจ้าของเว็บไซต์กับทาง Google)
วิธีการสร้างและยืนยัน Sitemap ของเว็บไซต์กับ Google
วิธีติดตั้งโค้ด Google Analytics
วิธีติดตั้งเครืองมือแปลภาษา Google Translate บนหน้าเว็บไซต์
ไขข้อข้องใจ "การทำเว็บไซต์ภาษาที่สอง"
สร้างฐานลูกค้าออนไลน์อย่างง่ายแต่มั่นคง ด้วยระบบสมาชิก
เทคนิคสร้างลิงค์และปุ่มโทรบนเว็บไซต์ เพื่อการติดต่อที่ง่าย แค่คลิก แล้วโทร
วิธีเพิ่มลิงก์ Add LINE และปุ่ม LINE it! บนหน้าเว็บไซต์ ช่วยผู้ชมแชทง่าย แชร์ข้อมูลได้สะดวก