JavaScriptを使用して画像ソースを変更する
だから私は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>
私が何か間違ったことをしている場合、誰でも説明してもらえますか？それとも何かが足りないのでしょうか？お願い助けて ：-）
function changeImage(a)ですので、a.src =>のようなものはありません。単にaを使用してください。
デモ ここ
_bの代わりに_tに常にパターンがある場合は、画像自体への参照を渡すことで、より汎用的にすることができます。
onclick='changeImage(this);'
次に、関数内で：
function changeImage(img) {
document.getElementById("img").src = img.src.replace("_t", "_b");
}
唯一の実際の問題は、.srcプロパティを持つオブジェクトではなく、文字列を渡すことです
いくつかの提案：
<button>などの自然にクリック可能な要素トリガーを使用します- 要素のイベントデータに
data-プレフィックス属性を使用します - DOMの準備ができたら、遅延バインドイベントを使用します。
マークアップ：
<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およびその他のレガシーブラウザをサポートする必要がある場合は、適切な 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。
私もその問題をチューブします。ただし、ソース（イメージ）を変更するたびに、イメージのインスタンスによって解決してください。
Onloadと呼ばれるのは1回だけのようです。しかし、この方法では、いつでも画像を変更できます。
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");
いくつかの変更があります（シャドウウィザードのソリューションを使用しない場合でも、IMGのIDで画像を変更したいことを前提としています）。
a.srcを削除し、aに置き換えます。
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
onclick属性を変更して、リテラルではなく新しいイメージソースの文字列を含めます。
onclick='changeImage( "1772031_29_b.jpg" );'
問題は、.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>
これを書く代わりに、
<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>
次のサンプルプログラムでは、100ミリ秒ごとに画像のsrc属性を変更していました。必要に応じて、指定された関数を呼び出すことができます。
<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>
TODOの下で、私はこの投稿であなたのコードを実装しようとしています。左側の大きなdivを取得し、右側の選択を反映するように変更しようとしています。周囲温度と体温の2つの選択肢があります
<!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>これを試して！
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";
}
}
<script type="text/javascript">
function changeImage(a) {
var picName=a.substring(1,a.length-1);
document.getElementById("image").src=picName;
}
</script>
<div id="main_img">
<img id="image" src="app.jpg">
</div>
<div id="thumb_img">
<img src='app.jpg' onclick="changeImage('+5steps.jpg+');">
<img src='5steps.jpg' onclick="changeImage('+award.png+');">
<img src='award.png' onclick="changeImage('+app.jpg+');">
</div>
上記のコードを使用するには、このhtmlファイルと写真（名前に注意してください。写真の名前に上記のコードを指定しているためです）を同じフォルダーに配置します...
こんにちは私はあなたのコードと統合しようとしました。
これを見ていただけますか？
ありがとう、MS
<!DOCTYPE html>
<html>
<head>
<!--TODO: need to integrate this code into the project to change images added 05/21/2016:-->
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
<title> Fluid 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 -->
<!--added on 05/28/2016-->
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index:40001; /* High z-index to ensure it appears above all content */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 40%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
opacity:.5; /* Sets opacity so it's partly transparent */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE
transparency */ filter:alpha(opacity=50); /* More IE transparency */ z-index:40001; }
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor:pointer;
}
/* The Close Button */
.close2 {
}
.close2:focus {
color: #000;
text-decoration: none;
cursor:pointer;
}
.modal-header {
color: #000;
padding: 2px 16px;
}
.modal-body {padding: 2px 16px;}
}
.modal-footer {
padding: 2px 16px;
background-color: #000099;
color: white;
}
</style>
<script>
$(document).ready(function() {
$("#water").click(function(event){
var $this= $(this);
if($this.hasClass('clicked')){
$this.removeClass('clicked');
SFDS.setFluidType(0);
$this.find('h3').text('Select the H20 Fluid Type');
}else{
SFDS.setFluidType(1);
$this.addClass('clicked');
$this.find('h3').text('H20 Selected');
}
});
$("#saline").click(function(event){
var $this= $(this);
if($this.hasClass('clicked')){
$this.removeClass('clicked');
SFDS.setFluidType(0);
$this.find('h3').text('Select the NaCL Fluid Type');
}else{
SFDS.setFluidType(1);
$this.addClass('clicked');
$this.find('h3').text('NaCL 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="fluid" class="main_button center-block">
<div class="large_circle_button, main_img">
<h2>Select<br>Fluid</h2>
<img class="center-block large_button_image" src="images/dropwater.png" alt=""/>
</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="water" class="large_rectangle_button">
<div class="label_wrapper">
<h3>Sterile<br>Water</h3>
</div>
<div id="thumb_img" class="image_wrapper">
<img src="images/dropsterilewater.png" alt="Sterile Water" class="sterile_water_image" onclick='changeImage("images/dropsterilewater.png");'>
</div>
<img src="images/checkmark.png" class="button_checkmark" width="96" height="88">
</div>
</div>
<div class="col-xs-12">
<div id="saline" class="large_rectangle_button">
<div class="label_wrapper">
<h3>Sterile<br>0.9% NaCL</h3>
</div>
<div class="image_wrapper">
<img src="images/cansterilesaline.png" alt= "Sterile Saline" class="sterile_salt_image" onclick='changeImage("images/imagecansterilesaline.png");'>
</div>
<img src="images/checkmark.png" class="button_checkmark" width="96" height="88">
</div>
</div>
<div class="col-xs-12">
<div class="small_rectangle_button">
<!-- Trigger/Open The Modal -->
<div id="myBtn" class="label_wrapper">
<h3>Change<br>Cartridge</h3>
</div>
<div class="image_wrapper">
<img src="images/changecartridge.png" alt="" class="change_cartrige_image" />
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close"><img src="images/x-icon.png"></span>
<h2>Change Cartridge Instructions</h2>
</div>
<div class="modal-body">
<h4>Lorem ipsum dolor sit amet, dicant nonumes volutpat cu eum, in nulla molestie vim, nec probo option iracundia ut. Tale inermis scripserit ne cum, his no errem minimum commune, usu accumsan omnesque in. Eu has nihil dolor debitis, ad nobis impedit per. Dicat mnesarchum quo at, debet abhorreant consectetuer sea te, postea adversarium et eos. At alii dicit his, liber tantas suscipit sea in, id pri erat probatus. Vel nostro periculis dissentiet te, ut ubique noster vix. Id honestatis disputationi vel, ne vix assum constituam.</h4>
<a href="#"><img src="images/video-icon.png" alt="click here for video"> </a>
<a href="#close2" title="Close" class="close2"><img src="images/cancel-icon.png" alt="Cancel"></a>
</div>
<div class="modal-footer">
<h4></h4>
</div>
</div>
</div>
<!--for comparison-->
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</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/parkerlogo.png" alt="parkerlogo" /> <!-- width="131" height="65" -->
</div>
</div>
</div>
</div>
</footer>
</body>
</html>