添加了 JavaScript 的图像映射

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function writeText(txt)
  5. {
  6. document.getElementById("desc").innerHTML=txt
  7. }
  8. </script>
  9. </head>
  10.  
  11. <body>
  12. <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
  13.  
  14. <map name="planetmap" id="planetmap">
  15.  
  16. <area shape="circle" coords="180,139,14"
  17. onMouseOver="writeText('直到 20 世纪 60 年代，金星一直被认为是地球的孪生姐妹，因为金星是离我们最近的行星，同时还由于两者拥有很多共同的特征。')"
  18. href ="/example/html/venus.html" target ="_blank" alt="Venus" />
  19.  
  20. <area shape="circle" coords="129,161,10"
  21. onMouseOver="writeText('从地球上是很难研究水星的，这是由于它和太阳的距离总是很近。')"
  22. href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
  23.  
  24. <area shape="rect" coords="0,0,110,260"
  25. onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')"
  26. href ="/example/html/sun.html" target ="_blank" alt="Sun" />
  27.  
  28. </map>
  29.  
  30. <p id="desc"></p>
  31.  
  32. </body>
  33. </html>