Changer la source de l'image avec JavaScript
Donc, je suis nouveau avec JavaScript (c'est en fait ma première tentative de faire fonctionner quelque chose) et j'ai un peu de difficulté. Je pensais avoir suffisamment de connaissances pour que cela fonctionne. J'ai même cherché des tutoriels et des scripts qui pourraient m'aider à résoudre ce problème, mais rien ne m'a vraiment aidé.
Je n'arrive pas à changer la source de l'image, voici le code que j'ai jusqu'à présent:
<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>
Quelqu'un pourrait-il s'il vous plaît expliquer si je fais quelque chose de mal? Ou peut-être que je manque quelque chose? Aidez-moi s'il vous plaît :-)
function changeImage(a) donc il n'y a pas de telle chose que a.src => utilisez simplement a.
démo ici
Si vous avez toujours le motif sur _b au lieu de _t vous pouvez le rendre plus générique en passant une référence à l’image elle-même:
onclick='changeImage(this);'
Puis dans la fonction:
function changeImage(img) {
document.getElementById("img").src = img.src.replace("_t", "_b");
}
Votre seul vrai problème est que vous passez une chaîne, pas un objet avec un .src propriété
Quelques suggestions:
- Utilisez un déclencheur d'élément naturellement cliquable, tel que
<button> - Utilisation
data-attributs préfixés pour les données d'événement sur l'élément - Utilisez les événements à liaison tardive lorsque le DOM est prêt.
Balisage:
<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:
Si vous devez prendre en charge IE et d’autres navigateurs classiques, utilisez un polyfill approprié pour 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 pour les navigateurs modernes.
J'ai aussi tube ce problème. Mais résolvez-le par une instance d'image chaque fois que vous modifiez la source (image).
Il semble que cela ne s'appellerait qu'une seule fois. Mais de cette façon, vous pouvez changer d'image à tout moment.
function chageIcon(domImg,srcImage)
{
var img = new Image();
img.onload = function()
{
// Load completed
domImg.src = this.src;
};
img.src = srcImage;
}
Mode d'utilisation.
chageIcon(document.getElementById("img"),"newIcon.png");
Vous avez quelques modifications (cela suppose que vous souhaitiez toujours modifier l'image avec un ID IMG, si vous n'utilisez pas la solution de Shadow Wizard).
Retirer a.src et remplacer par a:
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
Modifiez vos attributs onclick pour inclure une chaîne de la nouvelle source d'image au lieu d'un littéral:
onclick='changeImage( "1772031_29_b.jpg" );'
Le problème était que vous utilisiez .src sans en avoir besoin et vous deviez également différencier les img que vous vouliez changer.
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>
Au lieu d'écrire ceci,
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a.src;
}
</script>
essayer:
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
Exemple de programme suivant utilisé pour modifier l'attribut image src toutes les 100 millisecondes. vous pouvez appeler la fonction donnée selon vos souhaits.
<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>
Sous les TODO, j'essaye d'implémenter votre code dans cette publication. J'essaie de prendre la grande div à gauche et de la changer pour refléter les sélections à droite. il y a deux choix, température ambiante et température corporelle
<!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>Essaye ça!
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>
Utilisez le code ci-dessus en plaçant ce fichier html et des images (faites attention aux noms, parce que j'ai donné le code ci-dessus avec mes noms d'images) dans le même dossier que vous obtiendrez ...
Bonjour, j'ai essayé d'intégrer votre code.
Pouvez-vous regarder ça?
Merci M.S
<!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>