Javascript 如何使用HTML在图像顶部显示光标？

我不熟悉HTML和JavaScript，我有一个无法解决的任务。我用“地图”在HTML上显示了一幅图像，并用可点击的“区域”创建了一幅图像。 现在，我想在我的区域中心显示一个光标的图像，比如谷歌地图光标，当鼠标位于该区域时

---

我尝试了“document.getElementById”函数，但它替换了我的图像，而不是将其覆盖到背景图像上

我在互联网上搜索了这个问题的答案，但我只找到了CSS和jQuery解决方案，因为我不理解这些代码，所以我不能使用它们。 这是我的密码：

 <img src="image.png" border="0" class="map" usemap="#mymap" id="picture"/>

<map name="mymap">

    <area shape="rect"
        coords="419,451,453,477"
        title="This is area 1"
        href="#"            
        onmouseover="document.getElementById('picture').src='image2.png';"
        onmouseout="document.getElementById('picture').src='image.png';"
        />

</map>

---

提前感谢您的帮助

您正试图更改原始图像的src，因此可以预期图像会被替换

试着这样做：

在我的示例中，CSS是硬编码的。我知道你不需要CSS，但是如果你想在第一张图片上显示图片，就需要一些CSS

---

如果不使用它的唯一原因是你没有真正理解它（正如你所说的），那么你最好试着去学习它（没有那么难），而不是回到奇怪的解决方案

我怀疑你在没有css的情况下能否得到答案。“它会替换我的图像，而不是将其覆盖到我的背景图像上。”-OP希望在悬停时显示图片，而不是更改默认的光标样式。。

<div class="wrapper" style="position:relative;">
<img src="http://www.thetimes.co.uk/tto/multimedia/archive/00342/114240651_cat_342943c.jpg" border="0" class="map" usemap="#mymap" id="picture"/>
<img src="http://www.mycatspace.com/wp-content/uploads/2013/08/adopting-a-cat.jpg" style="display:none; position:absolute; left:0; top:0" id="picture2"/>

<map name="mymap">

    <area shape="rect"
        coords="0,100,100,150"
        title="This is area 1"
        href="#"            
       onmouseover="document.getElementById('picture2').style.display = 'block';"
        />    
</map>