HTML Images

1.Images

ในเนื้อหาส่วนนี้จะพูดถึงเรื่องของ Images หรือรูปภาพ ซึ่งสามารถใช้ในการออกแบบเว็บไซต์ให้สวยงามอีกด้วย เนื้อหาเกี่ยวกับรูปภาพใช้แท็ก <img> โดยภายในแท็กประกอบด้วยคุณสมบัติอีก 2 อย่างคือ

  1. src ใช้ระบุชื่อ และตำแหน่งของรูปภาพ
  2. alt คำอธิบายรูปภาพ (เป็นประโยชน์เมื่อรูปภาพไม่แสดง หรือ ไม่มีการระบุ URL รูปภาพ หรือเมื่อที่ผู้ใช้ไม่สามารถมองเห็นรูปภาพนั่นเอง) 

ไวยากรณ์

<img src="URL" alt="คำอธิบายรูปภาพ">

 

ตัวอย่างที่ 1 การแสดงผลรูปภาพแบบปกติ

<html>
 <body>
  <img src="https://www.narasak.com/wp-content/uploads/2020/09/04.jpg" alt="ตัวอย่างตารางสินค้า">
 </body>
</html>

ไฟล์ที่ 1 แสดงรูปภาพปกติ

 

ตัวอย่างที่ 2 แสดงข้อดีของ Attribute alt (กรณีที่ผู้ใช้ไม่สามารถมองเห็นรูปภาพ)

<html>
 <body>
  <img src="https://www.narasak.com/wp-content/uploads/2020/09/04" alt="ตัวอย่างตารางสินค้า">
 </body>
</html>

ไฟล์ที่ 2 ข้อดีของ attribute alt

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

 

ตัวอย่างที่ 3 กำหนดขนาดรูปภาพ 

การกำหนดขนาดรูปภาพแบบพื้นฐานสามารถทำได้โดย เพิ่มแอตทริบิวต์ width(ความกว้าง) และ height (ความสูง) 

<html>
 <body>
  <img src="https://www.narasak.com/wp-content/uploads/2020/09/04.jpg" alt="ตัวอย่างตารางสินค้า" width="20%" height="25%">
 </body>
</html>

ไฟล์ที่ 3 กำหนดขนาดรูปภาพ

 

ไฟล์รูปภาพที่รองรับในทุกเบราว์เซอร์

นามสกุลไฟล์
.apng
.gif
.ico, .cur
.jpg, .jpeg, .jfif, .pjpeg, .pjp
.png
.svg

 

2.Image Maps

หัวข้อที่ 2 ก็ยังเป็นการพูดถึงเรื่องของ รูปภาพ (Images) เพียงแต่จะมีความพิเศษมากกว่าเดิม เนื่องจากในหัวข้อที่ 2 เรื่อง Image Maps สามารถทำการคลิกที่ภายในรูปภาพได้ คล้ายกับ การดูแผนที่แล้วชี้ไปที่จังหวัด …. ก็แสดงข้อมูลของจังหวัดนั้นขึ้นมา เป็นต้น ซึ่งสามารถใช้ Image Maps ได้ด้วย element ดังต่อไปนี้

  • <map> ใช้ในการกำหนดแผนที่รูปภาพ ซึ่งแผนที่รูปภาพสามารถคลิกได้
  • <area> เป็นพื้นที่ภายในแผนที่รูปภาพ สามารถมีได้ตั้งแต่ 1 เป็นต้นไป

ความสำคัญของ Image Maps

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

 

การสร้างแผนที่รูปภาพ

ขั้นตอนที่ 1 แทรกรูปภาพด้วย <img> และเพิ่มแอตทริบิวต์ usemap จากนัั้นใส่ # ตามด้วยชื่อของแผนที่ ดังตัวอย่างที่ 1 

<img src="https://www.narasak.com/wp-content/uploads/2020/09/04.jpg" alt="ตัวอย่างตารางสินค้า" usemap="#productmap">

ภาพที่ 1 รูปภาพที่ใช้ในการสร้างแผนที่

ขั้นตอนที่ 2 สร้างแผนที่ให้กับรูปภาพด้วยแท็ก <map> และเชื่อมโยงไปยังรูปภาพด้วยแอตทริบิวต์ name

<map name="productmap">

ค่าของแอตทริบิวต์ name จะต้องตรงกันกับ usemap

 

ขั้นตอนที่ 3 เพิ่มพื้นที่ (area) ที่สามารถคลิกได้โดยใข้แท็ก <area> และกำหนดรูรปร่างเพื่อระบุตำแหน่งของแผนที่อย่างแม่นยำ โดยการกำหนดรูปร่าง

รูปร่าง (Shape)

  • rect พื้นที่สี่เหลี่ยม
  • circle พื้นที่วงกลม
  • poly พื้นที่หลายเหลี่ยม
  • default พื้นที่ทั้งหมด

 

การกำหนดพิกัดรูปภาพ (coordination)

การกำหนดพิกัดรูปภาพจะต้องกำหนดเป็นแกน x และแกน y 

  • x ระยะห่าง (หน่วยเป็นพิกเซล) จากขอบด้านซ้ายรูปภาพ
  • y ระยะห่าง (หน่วยเป็นพกเซล) จากขอบด้านบนรูปภาพ

ภาพที่ 2 area 1

จากภาพที่ 2 ได้ทำการหาพิกัดรูปภาพแกน x ,y ครอบคลุมทั้งหมดแล้ว คู่ที่ 1 x = 80, y=105 และคู่ที่ 2 x = 219, y = 288 ดังนั้นทำให้สามารถเขียนโค้ดได้ดังนี้

<area shape="rect" coords="80,105 , 219,288" href="https://www.narasak.com/ตัวอย่างหน้า-โทรศัพท์เค/">

ภาพที่ 3 area 2

จากภาพที่ 3 สามารถหาพิกัด x,y เพื่อสร้าง area ที 2 ได้ดังนี้ คู่ที่ 1 x = 80 , y = 299 และ คู่ที่ 2 x = 219 , y = 457

สามารถนำมาเขียนโค้ดได้ดังนี้

<area shape="rect" coords="80,299 , 219,457" href="https://www.narasak.com/ตัวอย่างหน้า-โทรทศัพท์เ/">

 

ผลลัพธ์

<html>
 <body>
  <img src="https://www.narasak.com/wp-content/uploads/2020/09/04.jpg" alt="ตัวอย่างตารางสินค้า" usemap="#productmap">

  <map name="productmap">
   <area shape="rect" coords="80,105 , 219,288" href="https://www.narasak.com/ตัวอย่างหน้า-โทรศัพท์เค/">
   <area shape="rect" coords="80,299 , 219,457" href="https://www.narasak.com/ตัวอย่างหน้า-โทรทศัพท์เ/">
  </map>
 </body>
</html>

ผลลัพธ์ของ Image Maps

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: