Question

我需要使用javascript更改地图中区域标记内的img的src。我是否以与普通图像相同的方式进行操作？代码是：

<img name="img_1" src="image-1.png" usemap="#imgMap" id="img1">
<map name="imgMap"><area shape="circle" coords="499, 724, 23" onmouseover="[change image code]">
</map>

有人可以编写一个更改image1并用image2替换它的JavaScript函数吗？最好不要JQuery。我需要多次使用此方法，因此特别需要一个函数。感谢。

Answer 1

首先给你的形象一个id。这使得javascript更容易。然后使用此代码：

document.getElementById("img1").src = "/link/to/new/image";

Answer 2

您可以使用CSS：

#imageId:hover
{
    background-image: url('image-2.png');
}

也就是说，如果我正确理解您的问题，请编辑您的问题，以便在我出错时更清楚。

Answer 3

这是功能：

<script>
    function changeImageArea(imageId, newSrc)
    {
        var img = document.getElementById(imageId);

        if (img)
        {
             img.src = newSrc;
        }
    }
 </script>

以下是您使用函数的方法：

<img name="img_1" src="image-1.png" usemap="#imgMap" id="img1">
  <map name="imgMap"><area shape="circle" coords="499, 724, 23" onmouseover="[change image code]">
  </map>

<script>changeImageArea('img1', 'http://www.somesite.com/image.jpg');</script>

请务必将JavaScript代码保留在HTML代码下方。这将避免参考问题。希望这可以帮到你。

如何在区域标签内更改img的src？

3 个答案: