创建图像映射

  1. <html>
  2. <body>
  3.  
  4. <p>请点击图像上的星球，把它们放大。</p>
  5.  
  6. <img
  7. src="/i/eg_planets.jpg"
  8. border="0" usemap="#planetmap"
  9. alt="Planets" />
  10.  
  11. <map name="planetmap" id="planetmap">
  12.  
  13. <area
  14. shape="circle"
  15. coords="180,139,14"
  16. href ="/example/html/venus.html"
  17. target ="_blank"
  18. alt="Venus" />
  19.  
  20. <area
  21. shape="circle"
  22. coords="129,161,10"
  23. href ="/example/html/mercur.html"
  24. target ="_blank"
  25. alt="Mercury" />
  26.  
  27. <area
  28. shape="rect"
  29. coords="0,0,110,260"
  30. href ="/example/html/sun.html"
  31. target ="_blank"
  32. alt="Sun" />
  33.  
  34. </map>
  35.  
  36. <p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
  37.  
  38. </body>
  39. </html>