Forum Moderators: open
Im that thread you had numerous suggestions but, to be honest, I'm not sure which ones apply to my current issue.
In my script file, I would want to achieve the following:
It partly depends on whether you're looking to swap the same images for all of them, or if you'd have different images associated with each checkbox.
Ok, that's clear now.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Swap Two Images Within a Form</title>
<script>
function processCheckbox(checker) {
var image1 = checker.form.getElementsByClassName('firstImage')[0];
var image2 = checker.form.getElementsByClassName('secondImage')[0];
var tmp1 = image1.src;
image1.src = image2.src;
image2.src = tmp1;
return false;
} // end processCheckbox()
</script>
</head>
<body>
<h1 style="text-align:center;">Swap Images</h1>
<br>
<br>
<form id="form1" action="#">
<input type="checkbox" name="Abigail" onclick="processCheckbox(this);"><b>Abigail</b><br>
<img src="images/A.png" class="firstImage" width="100"> <img src="images/B.png" class="secondImage" width="100">
</form>
<br>
<form id="form2" action="#">
<input type="checkbox" name="Barbara" onclick="processCheckbox(this);"><b>Barbara</b><br>
<img src="images/C.png" class="firstImage" width="100"> <img src="images/A.png" class="secondImage" width="100">
</form>
<br>
</body>
</html>
And since all of your previous examples have only had a single <img> tag, that's possibly one reason why you haven't gotten useful help. It wasn't until you said that you wanted to exchange two images that, for me at least, the problem was finally clear.
...it's often difficult to discern exactly what you're trying to achieve without a more precise description.
...along with some code to use as a starting point.
...all of your previous examples have only had a single <img> tag...
...this code depends on enclosing each checkbox and image pair in a <form> tag...
<img src="ICONS/blue_dot.png" id="image">
<img src="ICONS/blue_dot.png" data-images="ICONS/blue_dot.png,ICONS/red_dot.png" id="image">
<input type="checkbox" data-img-id="image">
function ImageToggler(id) {
this.img = document.getElementById(id);
this.images = this.img.getAttribute('data-images');
this._init();
}
ImageToggler.prototype._init = function () {
var that = this;
if (this.images) {
this.images = this.images.split(",");
this.imageindex = 0;
this.n = this.images.length;
this.setImg(this.imageindex);
//this.img.onclick = function () {that._nextImage.call(that);};
}
}
ImageToggler.prototype.setImg = function(idx) {
this.imageindex = idx;
this.img.src = this.images[idx];
}
ImageToggler.prototype.nextImage = function () {
this.imageindex = (this.imageindex + 1 < this.n? this.imageindex + 1: 0);
this.setImg(this.imageindex);
}
var checkboxes = document.getElementsByTagName('input'),
imgTogglers = [],
id,
i,
n;
for (i = 0, n = checkboxes.length; i < n; i++) {
id = checkboxes[i].getAttribute('data-img-id');
if (id) {
imgTogglers[i] = new ImageToggler(id);
checkboxes[i].onclick = (function (idx) {
return function () {
imgTogglers[idx].nextImage();
};
})(i);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<img src="Ann.png" data-images="Ann.png,Amy.png" id="Abigail">
<img src="Basha.png" data-images="Basha.png,Bess.png" id="Barbara">
<img src="Corey.png" data-images="Corey.png,Casey.png" id="Carolyn">
<div>
<input type="checkbox" data-img-id="Abigail">
<input type="checkbox" data-img-id="Barbara">
<input type="checkbox" data-img-id="Carolyn">
</div>
<script>
function ImageToggler(id) {
this.img = document.getElementById(id);
this.images = this.img.getAttribute('data-images');
this._init();
}
ImageToggler.prototype._init = function () {
var that = this;
if (this.images) {
this.images = this.images.split(",");
//console.log('this.images: ' + this.images);
this.imageindex = 0;
this.n = this.images.length;
this.setImg(this.imageindex);
//this.img.onclick = function () {that.nextImage.call(that);};
}
}
ImageToggler.prototype.setImg = function(idx) {
this.imageindex = idx;
this.img.src = this.images[idx];
//console.log('setting image to ' + this.images[idx]);
}
ImageToggler.prototype.nextImage = function () {
this.imageindex = (this.imageindex + 1 < this.n? this.imageindex + 1: 0);
this.setImg(this.imageindex);
//console.log('set image on ' + this.img.id + ' to ' + this.img.src);
}
var checkboxes = document.getElementsByTagName('input'),
imgTogglers = [],
id,
i,
n;
for (i = 0, n = checkboxes.length; i < n; i++) {
id = checkboxes[i].getAttribute('data-img-id');
if (id) {
imgTogglers[i] = new ImageToggler(id);
checkboxes[i].onclick = (function (idx) {
return function () {
imgTogglers[idx].nextImage();
};
})(i);
}
}
</script>
</body>
</html>
