Cách dùng JavaScript tạo Client-side Image Map

Client-side image map dùng thuộc tính usemap cho thẻ <img>, định nghĩa bởi <map> và <area>.

• usemap="#ten_map" trỏ đến <map name="ten_map">.
• <area> định nghĩa vùng nhạy (shape: rect, circle, poly) và hành động.

Ví dụ

<html>
  <head>
    <title>Using JavaScript Image Map</title>
    <script>
      function showTutorial(name) {
        document.myform.stage.value = name;
      }
    </script>
  </head>
  <body>
    <form name="myform">
      <input type="text" name="stage" size="20" />
    </form>
    <img src="/images/usemap.gif" alt="HTML Map" border="0" usemap="#tutorials" />
    <map name="tutorials">
      <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27"
            href="/perl/index.htm" alt="Perl Tutorial" target="_self"
            onMouseOver="showTutorial('perl')" onMouseOut="showTutorial('')" />
      <area shape="rect" coords="22,83,126,125"
            href="/html/index.htm" alt="HTML Tutorial" target="_self"
            onMouseOver="showTutorial('html')" onMouseOut="showTutorial('')" />
      <area shape="circle" coords="73,168,32"
            href="/php/index.htm" alt="PHP Tutorial" target="_self"
            onMouseOver="showTutorial('php')" onMouseOut="showTutorial('')" />
    </map>
  </body>
</html>