เมื่อเพิ่มลิงค์ไปยังรูปภาพใน Hypertext Markup Language (HTML) ลิงค์นั้นจะถูกเพิ่มเข้าไปในรูปภาพทั้งหมด นี่อาจเป็นปัญหาหากโปรแกรมเมอร์ต้องการสร้างภาพเดียวที่มีหลายพื้นที่หรือปุ่มและแต่ละพื้นที่ใช้สำหรับลิงค์ที่แตกต่างกัน แผนผังรูปภาพ HTML อนุญาตให้โปรแกรมเมอร์ระบุบางพื้นที่ที่ลิงก์จะไปทำให้เขาหรือเธอสามารถฝังลิงค์ต่าง ๆ ไว้ในภาพเดียวได้ สิ่งนี้ทำได้โดยการระบุรูปร่างสำหรับลิงค์และบอก HTML ว่าพิกัดใดที่จะใช้สำหรับลิงก์
รูปภาพที่ใช้สำหรับอินเทอร์เน็ตวัดเป็นพิกเซล การรู้จำนวนพิกเซลในภาพเป็นขั้นตอนแรกที่สำคัญในการสร้างแผนที่ภาพ ตัวอย่างเช่นกำลังใช้รูปภาพสี่เหลี่ยมที่มีความสูง 400 พิกเซลและกว้าง 250 พิกเซล จากนั้นผู้เขียนโปรแกรมจำเป็นต้องทราบวิธีการวัดรูปร่างในพิกัดอย่างถูกต้องเพื่อให้แผนที่รูปภาพ HTML ทำงานได้อย่างถูกต้อง
มุมซ้ายบนเรียกว่า 0,0 เมื่อใช้แผนที่รูปภาพ HTML มุมล่างขวาในกรณีนี้คือ 250,400 การวัดจะทำด้วยความกว้างก่อนจากนั้นจึงวัดความสูง วิธีคิดง่ายๆคือการวัดแรกบอก HTML ว่าไปทางขวาสุดจากขอบซ้ายและที่สองคือการบอกจำนวนพิกเซลที่จะลง หากโปรแกรมเมอร์ต้องการให้จุดบนแผนที่เป็น 10 พิกเซลจากขอบด้านซ้ายและลดลง 50 พิกเซลพิกัดจะเป็น 10,50
มีสามรูปร่างที่โปรแกรมเมอร์สามารถเรียกใช้สำหรับการแม็พอิมเมจ HTML: rect, circle และ polygon "Rect" ย่อมาจาก rectangle และโปรแกรมเมอร์จะต้องพิมพ์พิกัดสำหรับมุมซ้ายบนก่อนจากนั้นมุมล่างขวา วงกลมถูกระบุโดยการพิมพ์พิกัดที่วงกลมเริ่มต้นจากนั้นรัศมีของวงกลม รูปหลายเหลี่ยมถูกสร้างขึ้นโดยการพิมพ์พิกัดทั้งห้าจากด้านบนไปทางขวา
การเข้ารหัสแผนที่รูปภาพ HTML เป็นดังนี้: <map name = "ทดสอบ">
<area href = "url.html" shape = rect coords = "10,50,20,60">
<area href = "url.html" shape = circle coords = "10,50,4">
<area href = "url.html" shape = polygon coords = "10,50,12,55,15,60,13,65,8,55">
แผนที่รูปภาพ HTML แต่ละอันจะต้องมีชื่อและส่วน "url.html" คือลิงค์ที่ส่วนของแผนที่ภาพนั้นจะนำผู้ใช้เมื่อเขาหรือเธอคลิกที่มัน เมื่อรูปภาพวางอยู่บนเว็บไซต์ด้วย HTML โปรแกรมเมอร์จะต้องเขียน: usemap = "test" สิ่งนี้จะบอกภาพว่าจะใช้แผนที่รูปภาพ HTML ใด
