แอตทริบิวต์ ismap: ทำให้รูปภาพเป็น Server-side Image Map

แอตทริบิวต์ ismap (Boolean Attribute) ใช้ในแท็ก <img> ที่อยู่ภายใน <a> เพื่อทำให้รูปภาพเป็น Server-side Image Map เมื่อผู้ใช้คลิกที่รูปภาพ พิกัด (x,y) จะถูกส่งไปยัง Server ผ่าน Query String

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
    <a href="/process-click">
        <img src="https://example.com/map.jpg" 
             alt="แผนที่สำนักงาน" 
             width="300" height="250" 
             ismap>
    </a>
    <p>คลิกที่รูปภาพ: พิกัดจะส่งไป Server เป็น ?x,y</p>
</body>
</html>

วิธีการทำงาน

ผู้ใช้คลิกที่จุด (x, y) บนรูปภาพ (มุมซ้ายบน = 0,0)
เบราว์เซอร์นำทางไป: /process-click?150,75 (พิกัดคั่นด้วยคอมม่า)
Server รับพิกัด ประมวลผล ตอบกลับหน้าที่เหมาะสม

Server-side vs Client-side Image Map

ประเภท	แอตทริบิวต์	การทำงาน	ข้อดี/ข้อเสีย
Server-side	`ismap` บน <img> ใน <a>	ส่งพิกัดไป Server ประมวลผล	ซับซ้อน, ต้อง Round-trip, ไม่ Accessible
Client-side	`usemap` + <map> + <area>	จัดการฝั่ง Client (JavaScript/HTML)	เร็ว, Accessible, SEO Friendly, แนะนำ

Client-side Image Map (แนะนำใช้แทน)

<img src="map.jpg" usemap="#officemap" alt="แผนที่สำนักงาน">
<map name="officemap">
    <area shape="rect" coords="10,10,100,100" href="/room1" alt="ห้องประชุม 1">
    <area shape="circle" coords="200,200,50" href="/room2" alt="ห้องเซิร์ฟเวอร์">
    <area shape="poly" coords="300,50, 350,100, 300,150, 250,100" href="/room3" alt="ห้องพักผ่อน">
</map>

สรุป: ismap เป็นเทคโนโลยีเก่า (HTML 3.2) ควรใช้ Client-side Image Map (usemap + <map> + <area>) แทน เพื่อประสิทธิภาพ Accessibility และ SEO