Блог

Я новичок в HTML и JavaScript, и у меня есть задание, которое я не могу решить. Я отобразил изображение в HTML с помощью ‘map’ и создал с интерактивными ‘областями’. Теперь я хотел бы отобразить изображение курсора, например, курсора Google Maps, в центре моей области, когда мышь находится в этой области.

Я пробовал функцию «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 исходного изображения, поэтому следует ожидать, что изображение будет заменено.

Попробуйте что-то вроде этого:

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, но некоторые из них необходимы, если вы хотите отобразить изображение поверх первого.

Если единственная причина, по которой вы его не используете, заключается в том, что вы на самом деле его не понимаете (как вы заявляете), вам лучше попытаться изучить его (это не так уж сложно), а не возвращаться к странным решениям.