คู่มือท่องเที่ยว สำหรับคนรักการท่องเที่ยว

Chapter 14

รูปภาพ (Image)

ประเภทของไฟล์รูปภาพ

1) GIF (Compuserve Graphic Interchange Format) มีนามสกุล .gif สามารถแสดงสีได้สูงสุดเพียง 256 สี จึงไม่สามารถไล่ระดับสีได้มากนัก นิยมสร้างเป็นภาพการ์ตูน ตัวอักษร ภาพเคลื่อนไหว สามารถทำพื้นโปร่งใสได้ (transparent)

2) JPEG (Joint Photographic Experts Group) มีนามสกุลเป็น .jpg สามารถแสดงสีได้สูงสุด ถึง 16.7 ล้านสี จึงเหมาะกับภาพถ่าย หรือภาพที่ใช้สีจำนวนมาก ไม่สามารถทำภาพโปร่งใส หรือภาพเคลื่อนไหวได้


การแสดงรูปภาพ

มีรูปแบบการใช้งานดังนี้

<img src="ไฟล์รูปภาพ" alt="คำอธิบายรูปภาพ" width="number" height="number">
หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้
<img src="ไฟล์รูปภาพ" alt="คำอธิบายรูปภาพ" width="number" height="number" />
attribute ของรูปภาพ ได้แก่
- src="ไฟล์รูปภาพ"
- alt="คำอธิบายรูปภาพ"
- width="number" ความกว้างของรูป
- height="number" ความสูงของรูป
ค่าของ attribute width และ height เป็นตัวเลข หน่วยเป็น px หรือ %ของหน้าจอหรือ containner ที่บรรจุรูปภาพอยู่
- align = "top" | "middle" | "bottom" จัดวางตำแหน่งรูปภาพกับข้อความ
- border="number" ขนาดกรอบของรูป
- vspace="number" ระยะห่างระหว่างรูปกับข้อความ ในแนวตั้ง
- hspace="number" ระยะห่างระหว่างรูปกับข้อความ ในแนวนอน

Example แสดงรูปภาพ และคำอธิบาย
<img src="../images/flower.jpg" alt="ภาพดอกไม้ทิวลิป" />
Outputลองเอาเมาส์วางบนรูป จะมีคำอธิบายแสดงขึ้นมาค่ะ
ภาพดอกไม้ทิวลิป
Example แสดงรูปภาพ และขอบ
<img src="../images/flower.jpg" border="3"/>
OutpuT
Example ปรับขนาดรูปภาพ ด้วย attribute width และ height
<img src="../images/flower.jpg" width="200px" height="200px" />
<img src="../images/flower.jpg" width="200px" height="240px" />
<img src="../images/flower.jpg" width="50%" />
Output


การจัดวางตำแหน่งรูปภาพกับข้อความ

Example ข้อความอยู่ด้านบน
ข้อความหน้ารูปภาพ<img src="images/ryoma.jpg" />

<img src="../images/ryoma.jpg" />ข้อความหลังรูปภาพ

รูปภาพ<img src="../images/ryoma.jpg" />ระหว่างข้อความ

รูปภาพ<img src="../images/ryoma.jpg" align="top" />ระหว่างข้อความ จัดให้วางด้านบน align top

รูปภาพ<img src="../images/ryoma.jpg" align="middle" />ระหว่างข้อความ จัดให้วางตรงกลาง align middle

รูปภาพ<img src="../images/ryoma.jpg" align="bottom" />ระหว่างข้อความ จัดให้วางด้านล่าง align bottom

Output
ข้อความหน้ารูปภาพ

ข้อความหลังรูปภาพ

รูปภาพระหว่างข้อความ


รูปภาพระหว่างข้อความ จัดให้วางด้านบน align top

รูปภาพระหว่างข้อความ จัดให้วางตรงกลาง align middle

รูปภาพระหว่างข้อความ จัดให้วางด้านล่าง align bottom

กำหนดระยะห่างระหว่างรูปกับข้อความ

Example
ให้ข้อความ<img src="../images/ryoma.jpg" vspace="20" />วางห่างออกมาจากรูป ในแนวตั้ง

ให้ข้อความ<img src="../images/ryoma.jpg" hspace="20" />วางห่างออกมาจากรูป ในแนวนอน
Output
ให้ข้อความวางห่างออกมาจากรูป ในแนวตั้ง


ให้ข้อความวางห่างออกมาจากรูป ในแนวนอน
« Chapter 13
Chapter 15 »