Javascript 图像映射，图像应更改为悬停，_Javascript_Html_Css_Frontend_Imagemap

Javascript 图像映射，图像应更改为悬停，

javascript html css

Javascript 图像映射，图像应更改为悬停，,javascript,html,css,frontend,imagemap,Javascript,Html,Css,Frontend,Imagemap,为什么悬停时图像没有变化？图像应在悬停和单击时更改，并使用相同的图像贴图函数changeImage（）{ document.getElementById（'image'）.src=document.getElementById（'some_id'）.getAttribute（'data-img-src'）； }; 我更改了图像链接并将代码写入了JSFIDLE，您还必须将“map”更改为“usemap”，我去掉了其中一个地图，我认为您不需要它： <body> <img

为什么悬停时图像没有变化？图像应在悬停和单击时更改，并使用相同的图像贴图


函数changeImage（）{
document.getElementById（'image'）.src=document.getElementById（'some_id'）.getAttribute（'data-img-src'）；
};

我更改了图像链接并将代码写入了JSFIDLE，您还必须将“map”更改为“usemap”，我去掉了其中一个地图，我认为您不需要它：

<body>
  <img id="image" src="http://i.imgur.com/SY5h8EC.png" usemap="#map" />
    <map name="map" id="some_id" data-img-src='http://i.imgur.com/Sch9YFq.png'>
      <area shape="poly" coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227" id="area1" onmouseover=" changeImage();" />
    </map>
</body>
<script>
function changeImage() { document.getElementById('image').src=document.getElementById('some_id').getAttribute('data-img-src');
}
</script>



如果您需要其他方面的帮助，请发表评论，我将对其进行编辑
我更改了图像链接并将代码写入了JSFIDLE，您还必须将“map”更改为“usemap”，并且我删除了其中一个地图，我想您不需要它：
<body>
  <img id="image" src="http://i.imgur.com/SY5h8EC.png" usemap="#map" />
    <map name="map" id="some_id" data-img-src='http://i.imgur.com/Sch9YFq.png'>
      <area shape="poly" coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227" id="area1" onmouseover=" changeImage();" />
    </map>
</body>
<script>
function changeImage() { document.getElementById('image').src=document.getElementById('some_id').getAttribute('data-img-src');
}
</script>



如果您需要其他帮助，请发表评论，我将对其进行编辑。首先，您的脚本无效。您的函数声明中没有函数
关键字，尽管您似乎没有调用该函数。另一个原因是某些id
不是有效的标识符。您可以使用document.getElementById（“某些id”）
。谢谢。我已经做了改变。但事实并非如此working@Mitali你能发布更新的代码吗？另外，javascript存储在哪里？在另一个文件中？我已经更新了代码。javascript存储在正文后的同一文件中tag@MitaliJavaScript存储在哪里？它在另一个文件中吗？为什么在另一个
中有一个
？我没有看到@squint在您的更新中建议的更改。首先，您的脚本无效。您的函数声明中没有函数
关键字，尽管您似乎没有调用该函数。另一个原因是某些id
不是有效的标识符。您可以使用document.getElementById（“某些id”）
。谢谢。我已经做了改变。但事实并非如此working@Mitali你能发布更新的代码吗？另外，javascript存储在哪里？在另一个文件中？我已经更新了代码。javascript存储在正文后的同一文件中tag@MitaliJavaScript存储在哪里？它在另一个文件中吗？为什么在另一个
中有一个
？我没有看到@squint在您的更新中建议的更改。谢谢，我会仔细检查并检查它是否正常工作。：）我想要鼠标上的原始图像。怎么做？有没有一种方法可以在鼠标移动之前存储原始图像id的值？创建另一个函数，改用onmouseout，当你移动鼠标时再次更改图像，这样就可以了！类似：我还有图像的各个部分，它们在区域形状坐标上发生变化。因此，如果它们的id都相同。这无助于我理解你的观点，为了做到这一点，你必须为图像的每个部分创建一个函数，或者为每个区域指定一个不同的id，并使用id作为参数调用同一个函数。谢谢，我会仔细检查并检查它是否工作正常。：）我想要鼠标上的原始图像。怎么做？有没有一种方法可以在鼠标移动之前存储原始图像id的值？创建另一个函数，改用onmouseout，当你移动鼠标时再次更改图像，这样就可以了！类似：我还有图像的各个部分，它们在区域形状坐标上发生变化。因此，如果它们的id都是相同的，这无助于我理解你的观点，为了做到这一点，你必须为图像的每个部分创建一个函数，或者为每个区域指定一个不同的id，并使用id作为参数调用同一个函数