การ map ภาพ


	การ map ภาพ

เว็บเพจสำรอง (Backup Webpages) : thaiall.com | lampang.thcity.com
ปรับปรุง : 2548-02-25 ()

บทเรียน ONLINE : การเขียน Homepage ด้วย HTML [ การ map ภาพ ]

การ map ภาพ คืออะไร
รูปแบบของคำสั่ง map และตัวอย่าง
ตัวอย่าง map ภาพแบบง่าย
ตัวอย่างชุดคำสั่ง map ภาพโดย sabuy.com

การ map ภาพ คืออะไร

ปกติการทำ link บนภาพ 1 ภาพไปยัง 1 link เขียนได้ง่าย เช่น <a href=index.html><img src=mypic.gif></a>

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

รูปแบบของคำสั่ง map และตัวอย่าง

การ map ภาพแบ่งเป็น 2 ส่วน
1. ขณะเขียนภาพ เช่น <img src=map.jpg border=0 usemap=#sample>
2. กำหนดพื้นที่แต่ละส่วน ว่าส่วนใดจะเรียก link ใด เช่น
<map name="sample">
<area shape=rect coords="5,10,100,90" href="/learn/htmsamfd.htm">
<area shape=circle coords="140,50,40" href="/learn/htmsamfh.htm">
<area shape=poly coords="180,50,200,15,300,80" href="/learn/htmsamfw.htm">
</map>

ตัวอย่าง map ภาพแบบง่าย

ตัวอย่าง htm แบบเต็มแฟ้ม มี 14 บรรทัด

<html><title>Image map</title>
<body>
<img src=map.jpg border=0 usemap=#sample>
<body>
</html>
<map name="sample">
<area shape=rect coords="5,10,100,90" href="/learn/htmsamfd.htm">
<area shape=circle coords="140,50,40" href="/learn/htmsamfh.htm">
<area shape=poly coords="180,50,200,15,300,80" href="/learn/htmsamfw.htm">
</map>

ภาพข้างบนนี้เอา mouse ไปจ่อไว้กลางสี่เหลี่ยม แต่ไม่ได้ link ไปไหน เพราะไม่ได้ทำ map ไว้
แต่ตัวอย่างการ map จริง ๆ ก็ดูได้จาก ตัวอย่างข้างล่างของ sabuy.com เพราะ map ไว้จริง
ถ้าอย่างเห็นผลของการ map ภาพนี้ไปดูใน [ Editor on web for HTML ]

ตัวอย่างชุดคำสั่ง map ภาพโดย sabuy.com

ชุดคำสั่งบางส่วน และภาพจากเว็บหน้าแรกของ sabuy.com

แบบฝึกหัด

นำภาพ สามเหลี่ยม สีเหลี่ยม วงกลม ที่มีในตัวอย่างมาทดลองเขียนเองให้ได้
นำภาพ ของ sabuy มาสร้าง map เองโดยดูจากภาพเท่านั้น และ link ไปให้ถูกที่ด้วย
สร้างภาพขึ้นเอง และใช้ประโยชน์จากการ map ภาพให้ได้

[ Editor on web for HTML ]