เป็นการนำภาพมาตัดแบ่งเป็นส่วนๆ แล้วนำแต่ละส่วนไปสร้างเป็นลิงค์ เพื่อเชื่อมโยงไปยังหัวข้อที่ ต้องการ
1. จากตัวอย่างจะใช้ภาพเดียว
2. แต่ละส่วนก็จะสร้างลิงค์ให้เชื่อมโยงไปหาเว็บเพจต่างๆ เช่น เกี่ยวกับเรา อัลบัมภาพ เป็นต้น

วิธีสร้าง
1. สร้างไฟล์งานใหม่ เช่น index_imap.php แล้วดับเบิ้ลคลิกเปิดไฟล์
2. แทรกภาพเข้ามา แล้วคลิกเลือกรูปภาพที่ได้แทรกมา
3. คลิกเครื่องมือ Oval Hotspot ใน Properties เพื่อสร้างอิมเมจแม็พแบบวงกลม
4. วาดวงกลมบนภาพที่ตำแหน่งดังตัวอย่าง
5. ใน Properties กำหนดค่าดังนี้ (คลิกและพิมพ์ค่าลงไปเลย)
Link = ชื่อไฟล์ เช่น index_imap.php
Target = _self แสดงเว็บเพจลิงค์ในหน้าจอเดิม เป็นการเชื่อมไปแสดงไฟล์เมนูหลักของเว็บไซต์
Alt = หน้าหลัก เป็นข้อความอะไรก็ได้ที่ต้องการให้แสดง กรณีที่ภาพมีปัญหา ก็จะแสดงเป็น ข้อความให้คลิกเลือกแทนได้
6. หัวข้ออื่นๆ ก็สร้างลิงค์ คล้ายๆ กัน

7. ดูผลงานที่ได้ โดยกดปุ่ม F12

แก้ไขลิงค์แบบอิมเมจแม็พใน Dreamweaver CS3

 

ลักษณะการสร้างลิงค์แบบนี้ ตำแหน่งที่ได้ใช้เครื่องมือสร้างเป็นกรอบเพื่อใช้เป็นลิงค์จะเรียกว่า ฮอท สป็อต ซึ่งเราสามารถแก้ไขได้เช่น ลบ ขยายขนาด เป็นต้น
การย่อหรือขยายขนาด Hotspot
1. คลิกเครื่องมือ Pointer Hotspot Tool
2. คลิกเลือกฮอทสป็อท ตำแหน่งบนภาพ
3. จะปรากฏจุดโดยรอบ
4. ชี้ที่จุดที่มุมใดๆ กดปุ่มซ้ายค้างไว้ แล้วลากออก ขยายขนาด

ลบลิงค์แบบอิมเมจแม็พใน Dreamweaver CS3

 

1. คลิกเครื่องมือ Pointer Hotspot Tool
2. คลิกเลือกฮอทสป็อตที่ต้องการ
3. กดปุ่ม Delete ที่แป้นพิมพ์

ย้ายตำแหน่งลิงค์แบบอิมเมจแม็พใน Dreamweaver CS3

 

1. คลิกเครื่องมือ Pointer Hotspot Tool
2. ชี้ลูกศรที่ฮอทสป็อตที่ต้องการ
3. กดปุ่มซ้ายของเมาส์ค้างไว้แล้วลากออก

การเปลี่ยนลิงค์แบบอิมเมจแม็พไปยังเว็บเพจอื่น
1. ฮอทสป็อตเดิม เชื่อมไปยัง aboutus.php
2. คลิกเลือกฮอทสป็อตที่ต้องการเปลี่ยนลิงค์
3. คลิกและพิมพ์ชื่อเว็บเพจที่ต้องการสร้างลิงค์ ในช่อง Link หรือจะคลิกปุ่ม Browse เพื่อไป เลือกไฟล์ก็ได้ แน่นอนกว่า เพราะการพิมพ์ชื่อลงไปเอง ถ้าผิด ลิงค์ก็ขาดความสัมพันธ์