แสดงรูป (Images)


JPG

GIF

PNG


HTML Images

ใส่รูปภาพใน HTML โดยใช้ Tag <img>

ภายใน attribute src ระบุที่อยู่ของไฟล์รูป

alt ใส่ข้อความอธิบายหากรูปภาพไม่ขึ้น

width ระบุความกว้างของรูป

height ระบุความสูงของรูป

ตัวอย่าง


                        
                        

ลองเขียนโค้ด

หรือเราสามารถใช้ CSS ใน Attribute style เพื่อตกแต่ง Element รูปภาพ

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


ทำรูปให้เป็นลิงก์

ใช้ Element <a> ครอบ Element <img> อีกที

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Image Floating

ใช้ property ของ CSS ที่ชื่อว่า float ในการจัดรูปให้อยู่ด้านขวาหรือด้านซ้ายของข้อความ

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


Image Maps

ใช้ Tag <map> ในการระบุ image-map

image-map คือรูปที่เราสามารถกำหนดพื้นที่ที่สามารถคลิกได้

Attribute name ของ <map> จะทำงานประสานกับ Attribute usemap ของ Element <img>

ภายใน <map> จะประกอบด้วย Tag <area> ที่ระบุพื้นที่ที่ต้องการให้สามารถคลิกได้

ตัวอย่าง


                        
                        

ลองเขียนโค้ด


บทสรุป

  • ใช้ <a> เพื่อแสดงรูป
  • ใช้ Attribute src เพื่อระบุ URL ของรูป
  • ใช้ Attribute alt เพื่อแสดงข้อความหากรูปโหลดไม่ขึ้น
  • ใช้ Attribute width และ height เพื่อกำหนดขนาดของรูป
  • ใช้ Property CSS width และ height เพื่อกำหนดขนาดของรูป (แนะนำ)
  • ใช้ Property CSS float เพื่อจัดวางรูปให้อยู่ด้านซ้ายหรือขวาของข้อความ
  • ใช้ <map> เพื่อระบุ image-map
  • ใช้ <area> เพื่อระบุพื้นที่ภายในรูปที่ต้องการให้สามารถคลิกได้
  • ใช้ Attribute usemap ของ Element <img> เพื่อเชื่อมการทำงานกับ image-map