Изменить источник изображения с помощью JavaScript

Question

Итак, я новичок в JavaScript (на самом деле это моя первая попытка заставить что-то работать), и у меня возникли некоторые проблемы. Я думал, что у меня достаточно знаний, чтобы сделать эту работу, я даже гуглил учебники и сценарии, которые могли бы помочь мне в этом разобраться, но ничего не помогло.

Я не могу изменить источник изображения, вот код, который у меня есть:

<script type="text/javascript">
    function changeImage(a) {
        document.getElementById("img").src=a.src;
    }
</script>
<div id="main_img">
    <img id="img" src="1772031_29_b.jpg">
</div>
<div id="thumb_img">
    <img src='1772031_29_t.jpg'  onclick='changeImage("1772031_29_b.jpg");'>
    <img src='1772031_55_t.jpg'  onclick='changeImage("1772031_55_b.jpg");'>
    <img src='1772031_53_t.jpg'  onclick='changeImage("1772031_53_b.jpg");'>
</div>

Может кто-нибудь объяснить, если я делаю что-то не так? Или может я что-то упустил? Помогите мне пожалуйста: -)

Answer 1

function changeImage(a), поэтому нет такой вещи, как a.src =>, просто используйте a.

demo здесь

Answer 2

Если у вас всегда будет шаблон _b вместо _t, вы можете сделать его более общим, передав ссылку на само изображение:

onclick='changeImage(this);'

Тогда в функции:

function changeImage(img) {
    document.getElementById("img").src = img.src.replace("_t", "_b");
}

Answer 3

Ваша единственная реальная проблема в том, что вы передаете строку, а не объект с .src свойством

Некоторые предложения:

• Используйте триггер элемента с естественным кликом, например <button>
• Использовать data- префиксные атрибуты для данных события в элементе
• Использовать события с поздней привязкой, когда DOM готов.

Markup:

<div id="main_img">
  <img id="img" src="1772031_29_b.jpg">
</div>
<ul id="thumb_img">
  <li><button data-src='1772031_29_b.jpg'><img src='1772031_29_t.jpg' /></button></li>
  <li><button data-src='1772031_55_b.jpg'><img src='1772031_55_t.jpg' /></button></li>
  <li><button data-src='1772031_53_b.jpg'><img src='1772031_53_t.jpg' /></button></li>
</ul>

JavaScript:

Если вам нужна поддержка IE и других устаревших браузеров, используйте правильный polyfill для Array.from

function clickedButton(btn, event) {
  document.getElementById('img').src = btn.getAttribute('data-src');
}

function bindClick(btn) {
  btn.addEventListener('click', clickedButton.bind(null,btn));
}

// Setup click handler(s) when content is loaded
document.addEventListener("DOMContentLoaded", function(){
  Array.from(document.querySelectorAll('#thumb_img > button'))
    .forEach(bindClick));
});

---

Редактировать: Vanilla JS для современных браузеров.

Answer 4

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

Кажется, он будет вызван onload только один раз.Но таким образом, вы можете изменить изображение в любое время.

function chageIcon(domImg,srcImage)
    {
        var img = new Image();
        img.onload = function()
        {
            // Load completed
            domImg.src = this.src;
        };
        img.src = srcImage;
    }

Режим использования.

chageIcon(document.getElementById("img"),"newIcon.png");

Answer 5

У вас есть несколько изменений (предполагается, что вы все еще хотите изменить изображение с ID IMG, если не используете решение Shadow Wizard).

Удалите a.src и замените на a:

<script type="text/javascript">
function changeImage(a) {
    document.getElementById("img").src=a;
}
</script>

Измените атрибуты onclick, чтобы включить строку нового источника изображения вместо литерала:

onclick='changeImage( "1772031_29_b.jpg" );'

Answer 6

Проблема заключалась в том, что вы использовали .src, не нуждаясь в нем, и вам также нужно было определить, какой img вы хотите изменить.

function changeImage(a, imgid) {
    document.getElementById(imgid).src=a;
}

<div id="main_img">
    <img id="img" src="1772031_29_b.jpg">
</div>
<div id="thumb_img">
    <img id="1" src='1772031_29_t.jpg'  onclick='changeImage("1772031_29_b.jpg", "1");'>
    <img id="2" src='1772031_55_t.jpg'  onclick='changeImage("1772031_55_b.jpg", "2");'>
    <img id="3" src='1772031_53_t.jpg'  onclick='changeImage("1772031_53_b.jpg", "3");'>
</div>

Answer 7

Вместо написания этого,

<script type="text/javascript">
function changeImage(a) {
    document.getElementById("img").src=a.src;
}
</script>

попробовать:

<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>

Answer 8

Следующая программа-пример используется для изменения атрибута src для изображения каждые 100 миллисекунд.Вы можете вызывать данную функцию по своему желанию.

<html>
<head>
</head>
<body>
<img src="bulboff.jpg" height=200 width=200 id="imm" align="right">

<script type="text/javascript">

function bulb() {

var b = document.getElementById("imm");

if(b.src.match("bulboff.jpg")) {
 b.src = "bulbon.jpg";
}
 else {

 b.src="bulboff.jpg";
}
}
 setInterval(bulb,100);
</script>
</body>
</html>

Answer 9

Попробуйте!

function changeimage() {
    var image = document.getElementById('imagem');
    if (image.src.match("img")) {
        for(i = 1; i <= 3; i++) {
            image.src = "img/image2"+i+".png";
        }
    } else {
        image.src = "img/image1.png";
    }
}

Answer 10

В TODO я пытаюсь реализовать ваш код в этой публикации. Я пытаюсь взять большой div слева и изменить его, чтобы отразить выбор справа. Есть два варианта: температура окружающей среды и температура тела

<!DOCTYPE html>
<html>
<head>
<title> Temperature Selection </title>
<!-- css -->
	<link rel="stylesheet" href="bootstrap-3/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/main.css">

<!-- end css -->
<!-- Java script files -->
<!-- Date.js date os javascript helper -->
    <script src="js/date.js"> </script>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="js/jquery-2.1.1.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="bootstrap-3/js/bootstrap.min.js"> </script>
	<script src="js/library.js"> </script>
	<script src="js/sfds.js"> </script>

	<script src="js/main.js"> </script>

<!-- End Java script files -->

<!--TODO: need to integrate this code into the project:-->
<script type="text/javascript">
    function changeImage(a) {
        document.getElementById("img").src=a;
    }
</script>
	<script>
	
	
	$(document).ready(function() {
	
		$("#ambient").click(function(event){
			var $this= $(this);
			if($this.hasClass('clicked')){
				$this.removeClass('clicked');
				SFDS.setTemperatureType(0);
				$this.find('h2').text('Select Ambient Temperature 21 Degrees C');
				<!--added on 05/20/2015-->
			}else{
				SFDS.setTemperatureType(1);
				$this.addClass('clicked');
				$this.find('h2').text('Ambient Temperature 21 Degrees C Selected');


			}
		});
		
		$("#body").click(function(event){
			var $this= $(this);
			if($this.hasClass('clicked')){
				$this.removeClass('clicked');
				SFDS.setTemperatureType(0);
				$this.find('h2').text('Select Body Temperature 37 Degrees C');
				<!--added on 05/20/2015-->
			}else{
				SFDS.setTemperatureType(1);
				$this.addClass('clicked');
				$this.find('h2').text('Body Temperature 37 Degrees C Selected');


			}
		});
		
		
		
	});
</script>

</head>
<body>
<div class="container-fluid">
	<header>
		<div class="row">
			<div class="col-xs-6">
				<div id="date"><span class="date_time"></span></div>
			</div>
			<div class="col-xs-6">
				<div id="time" class="text-right"><span class="date_time"></span></div>
			</div>
		</div>
	</header>
	<div class="row">
		<div class="col-md-offset-1 col-sm-3 col-xs-8 col-xs-offset-2 col-sm-offset-0">
			<div id="temperature" class="main_button center-block">
				<div class="large_circle_button"> 
					<h2>Select<br/>Temperature</h2>
					<img class="center-block large_button_image" src="images/thermometer.png" alt=""> 
                    <!-- TODO <img src='images/dropsterilewater.png'  onclick='changeImage("images/dropsterilewater.png");'>
                                <img src='images/imagecansterilesaline.png'  onclick='changeImage("images/imagecansterilesaline.png");'>-->
				</div>
				<h1></h1>
			</div>
		</div>
		<div class=" col-md-6 col-sm-offset-1 col-sm-8 col-xs-12">
			<div class="row">
				<div class="col-xs-12">
					<div id="ambient" class="large_rectangle_button">
						<div class="label_wrapper">
							<h2>Ambient<br/>Temperature<br/>21<sup>o</sup>C</h2>
						</div>
						<div class="image_wrapper">
							<img src="images/house.png" alt="" class="ambient_temp_image">
						</div>
						<img src="images/checkmark.png" class="button_checkmark" width="96" height="88">

					</div>
				</div>
				<div class="col-xs-12">
					<div id="body" class="large_rectangle_button">
						<div class="label_wrapper">
							<h2>Body<br/>Temperature<br/>37<sup>o</sup>C</h2>
						</div>
						<div class="image_wrapper">
							<img src="images/bodytempman.png" alt="" class="body_temp_image">
						</div>
						<img src="images/checkmark.png" class="button_checkmark" width="96" height="88">

					</div>
				</div>
			</div>
		</div>
	</div>

				
</div>
<footer class="footer navbar-fixed-bottom">
	<div class="container-fluid">
		<div class="row cols-bottom">
			<div class="col-sm-3">
				<a href="main.html">
				<div class="small_circle_button">					
					<img src="images/buttonback.png" alt="back to home" class="settings"/> <!--  width="49" height="48" -->
				</div>
			</div></a><div class=" col-sm-6">
				<div id="stop_button" >
					<img src="images/stop.png" alt="stop" class="center-block stop_button" /> <!-- width="140" height="128" -->
				</div>
					
			</div><div class="col-sm-3">
				<div id="parker" class="pull-right">
					<img src="images/#" alt="logo" /> <!-- width="131" height="65" -->
				</div>
			</div>
		</div>
	</div>
</footer>


</body>
</html>