Как изменить src img в теге области?

Мне нужно изменить src img, который находится внутри тегов области на карте, используя javascript. Я делаю это так же, как обычные изображения или нет? Код:Как изменить src img в теге области?

<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, которая меняет изображение1 и заменяет его на image2? Не рекомендуется JQuery. Мне нужно использовать этот метод несколько раз и поэтому специально нужна функция. Благодарю.

источник

2014-12-01 TessellatingPi

Сначала дайте вашему изображению идентификатор. Это упрощает работу с javascript. затем использовать этот код:

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

источник

2014-12-01 12:30:42 Jerodev

Технически вам не нужен идентификатор. 'document.querySelector (" [usemap = '# "+ this.parentNode.getAttribute (" name ") +"'] ")' получит бы это надежно, но довольно длинный. Я мог бы добавить что-то вроде этого в функцию, поэтому я могу просто использовать getMapImage (this) '. –

Вы можете использовать CSS:

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

То есть, если я правильно понимаю ваш вопрос, пожалуйста, измените ваш вопрос, чтобы сделать его более ясным, если я ошибаюсь.

источник

2014-12-01 12:31:24 Jonast92

Это действительно лучший вариант, но он попросил решение для javascript. – Jerodev

@Jerodev Он не спрашивал jQuery (и все в порядке, он помечен JavaScript, но я предполагаю, что OP не знал лучше), я понимаю, что это можно сделать с помощью JavaScript, но это лучший вариант, так что это зависит от него хочет ли он его использовать или нет :) – Jonast92

Вот функция:

<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-кода. Это позволит избежать проблем со ссылками. Надеюсь, это может вам помочь.

источник

2014-12-01 12:35:58 Fabiano

Как изменить src img в теге области?

ответ

Смежные вопросы