เทคโนโลยีอินเทอร์เน็ต

รูปภาพ (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

ให้ข้อความ

วางห่างออกมาจากรูป ในแนวตั้ง

ให้ข้อความ

วางห่างออกมาจากรูป ในแนวนอน

Google Sites

Report abuse