Question

当我将鼠标悬停在我的图片地图上时，我希望有一个包含一些其他信息的文本框。有谁知道这有什么用呢？

<!DOCTYPE html>
<html>

<script>
function writeText(txt) {
    document.getElementById("test").innerHTML = txt;
}
</script>
</head>

<body>
<img src ="test.png" alt="Jacket" usemap="#jacket" />

<p id="test"></p>
<map name="jacket">
    <area shape="poly" coords="174,361,149,350,180,203,217,213"href="test"; title="Discover" alt="Shop Now" onmouseover="writeText('$60')" />
  <map name="Map" id="Map">
    <area href="test"; title="Shop Now" alt="Discover" shape="poly" coords="221,215,183,218,190,164" onmouseover="writeText('$60')" onmouseout="writeText('')"/>
</map> 
</map> 

</body>
</html>

谢谢大家。我最终做了这样的事情

 $(document).ready(function()
 {
     $('area').qtip({
        style: {
            classes: 'qtip-dark'
        },
         content: 'Shop Now!',
         position: {
             target: 'mouse', // Track the mouse as the positioning target
             adjust: { x: 5, y: 5 } // Offset it slightly from under the mouse
         }
     });
 });

图像映射的文本框

0 个答案: