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

Question

我是 HTML 和 JavaScript 新手，我有一个无法解决的作业。我已经使用“ map ”在 HTML 上显示了图像，并使用可点击的“区域”创建了图像。现在，当鼠标位于该区域时，我想在我的区域的中心显示光标的图像，例如 Google map 光标。

我尝试过“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>

预先感谢您的帮助!

Answer 1

您正在尝试更改原始图像的 src，因此图像会被替换。

尝试这样的事情:

http://jsfiddle.net/C5qPZ/2/

<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>

CSS 在我的示例中是硬编码的。我知道您不需要 CSS，但如果您想在第一个图像上显示图像，则需要一些 CSS。

如果不使用它的唯一原因是您并不真正理解它(如您所说)，那么您最好尝试学习它(这并不困难)，而不是恢复到奇怪的解决方案。