การ map ภาพ
เว็บเพจสำรอง (Backup Webpages) : thaiall.com
ปรับปรุง : 2548-02-25 ()
ผู้สนับสนุน ยินดีรับ ผู้สนับสนุน เว็บไซต์ด้านการศึกษา
กลุ่มเว็บไซต์นี้ เริ่มพัฒนา พ.ศ.2542
โดยบุคลากรทางการศึกษาด้านคอมพิวเตอร์
โทร. 081-9927223 (ผมเป็นคนลำปางหนา)
ปล. ขอไม่รับ work at home / อาหารเสริม
[ การ map ภาพ ]
  1. การ map ภาพ คืออะไร
  2. รูปแบบของคำสั่ง map และตัวอย่าง
  3. ตัวอย่าง map ภาพแบบง่าย
  4. ตัวอย่างชุดคำสั่ง 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
<MAP NAME="FrontPageMap1">
<AREA SHAPE="RECT" COORDS="100, 208, 147, 230" HREF="6.html" TARGET="_parent">
<AREA SHAPE="RECT" COORDS="133, 122, 219, 142" HREF="5.html" TARGET="_parent">
<AREA SHAPE="RECT" COORDS="22, 103, 97, 122" HREF="4.html" TARGET="_parent">
<AREA SHAPE="RECT" COORDS="87, 83, 145, 100" HREF="3.html" TARGET="_parent">
<AREA SHAPE="RECT" COORDS="153, 74, 212, 95" HREF="2.html" TARGET="_parent">
<AREA SHAPE="RECT" COORDS="60, 27, 120, 48" HREF="1.html" TARGET="_parent">
</MAP>
<img src="map.jpg" width="249" height="288" alt="เที่ยวเมืองไทย ไม่ไปไม่รู้" border="0" usemap="#FrontPageMap1">

แบบฝึกหัด
  1. นำภาพ สามเหลี่ยม สีเหลี่ยม วงกลม ที่มีในตัวอย่างมาทดลองเขียนเองให้ได้
  2. นำภาพ ของ sabuy มาสร้าง map เองโดยดูจากภาพเท่านั้น และ link ไปให้ถูกที่ด้วย
  3. สร้างภาพขึ้นเอง และใช้ประโยชน์จากการ map ภาพให้ได้
[ Editor on web for HTML ]
แนะนำเว็บใหม่ : ผลการจัดอันดับ
รักลำปาง : thcity.com : korattown.com : topsiam.com : มหาวิทยาลัยเนชั่น
ศูนย์สอบ : รวมบทความ : ไอทีในชีวิตประจำวัน : ดาวน์โหลด : facebook.com
ติดต่อ ทีมงาน ชาวลำปาง มีฝันเพื่อการศึกษา Tel.08-1992-7223