Change image source with JavaScript

后端未结

关注

 13  1811

So I\'m new with JavaScript (this is actually my first attempt to make something work) and I\'m having a bit of trouble. I thought I had enough knowledge to make this work,

相关标签:

13条回答

深忆病人

2020-11-27 18:59

Under the TODOs, i am trying to implement your code in this posting. I am trying to take the large div on the left and make it change to reflect selections on the right. there are two selections, Ambient Temperature and Body Temperature

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

0 讨论(0)

礼貌的吻别

2020-11-27 19:00

Your only real problem is you are passing a string, not an object with a .src property

Some suggestions:

Use a naturally clickable element trigger, such as <button>
Use data- prefixed attributes for event data on the element
Use late bound events when the DOM is ready.

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:

If you need to support IE and other legacy browsers, Use a proper polyfill for 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));
});

Edit: Vanilla JS for modern browsers.

0 讨论(0)

礼貌的吻别

2020-11-27 19:00

Instead of writing this,

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

try:

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

0 讨论(0)

既然无缘

2020-11-27 19:03
I also tube that problem. But solve it by an instance of an image every time you change the source (image).

It seems that would be called onload only once. But this way, you can change image whenever you want.
```
function chageIcon(domImg,srcImage)
    {
        var img = new Image();
        img.onload = function()
        {
            // Load completed
            domImg.src = this.src;
        };
        img.src = srcImage;
    }
```
Mode use.
```
chageIcon(document.getElementById("img"),"newIcon.png");
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦谈多话

2020-11-27 19:06
If you will always have the pattern on _b instead of _t you can make it more generic by passing reference to the image itself:
```
onclick='changeImage(this);'
```
Then in the function:
```
function changeImage(img) {
    document.getElementById("img").src = img.src.replace("_t", "_b");
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

没有蜡笔的小新

2020-11-27 19:08

The Following Example Program used to change the image src attribute for every 100 milliseconds. you may call the given function as your wish.

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

0 讨论(0)