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

How to change src of img within an area tag?

本文关键字：img src 区域 标签      更新时间：2023-09-26

我需要使用 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>

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

首先给你的图片一个id。这使得javascript更容易。然后使用以下代码：

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

您可以使用 CSS：

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

也就是说，如果我正确理解了您的问题，请编辑您的问题以更清楚地说明我是否错了。

这是函数：

<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 代码下方。这将避免引用问题。希望这能帮助你。

相关文章：