onmouseover - 将鼠标悬停在图像映射上

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script>
  5. function writeText(txt) {
  6.   document.getElementById("desc").innerHTML = txt;
  7. }
  8. </script>
  9. </head>
  10.  
  11. <body>
  12.  
  13. <img src ="/i/eg_planets.jpg"
  14. alt="Planets"
  15. usemap ="#planetmap" />
  16.  
  17. <map name="planetmap">
  18. <area shape ="rect" coords ="0,0,108,260"
  19. onmouseover="writeText('太阳和像木星这样的天然气巨行星是迄今为止太阳系中最大的天体。')"
  20. href ="/demo/planets_sun.html" target ="_blank" alt="Sun" />
  21.  
  22. <area shape ="circle" coords ="129,162,9"
  23. onmouseover="writeText('水星很难从地球上研究，因为它总是如此接近太阳。')"
  24. href ="/demo/planets_mercur.html" target ="_blank" alt="Mercury" />
  25.  
  26. <area shape ="circle" coords ="180,139,14"
  27. onmouseover="writeText('直到 20 世纪 60 年代，金星经常被认为是地球的孪生姐妹，因为金星是离我们最近的行星，因为这两个行星似乎有许多共同的特征。')"
  28. href ="/demo/planets_venus.html" target ="_blank" alt="Venus" />
  29. </map> 
  30.  
  31. <p id="desc">将鼠标悬停在太阳和火星上，看看不同的描述。</p>
  32.  
  33. </body>
  34. </html>