I need, in a project, an interaction consisting of 5 checkboxes, which when checked, change the src of images on the page.
I already found a ready, actually: link
What I want to do is create more checkboxes to change the source of other images within the same script.
I've been trying to do this for a while, but I can not (because I do not know anything about Javascript).
Is this script the best solution for this? How would I add one more image and another checkbox?
If you have more than one option to change the same imagem then my recommendation is to use radio instead of checkbox and separate it into groups. The problem of checkbox that I think would be when you select 2 checkboxs to change a same image, which prevails and why would you leave the 2 checked?
function mudarBg(valor, idImg) {
document.getElementById(idImg).src = valor;
}
window.onload = function() {
document.getElementsByName('bgradio1')[0].click();
document.getElementsByName('bgradio2')[0].click();
}#sua_img {
display: block;
width: 150px;
height: 150px;
}
#sua_img2 {
display: block;
width: 150px;
height: 150px;
}<input type="radio" name="bgradio1" onclick="mudarBg(this.value, 'sua_img')" value="http://igshalon.com/iswp/wp-content/uploads/2014/02/numero-1.jpg">Imagem 1.1<br/>
<input type="radio" name="bgradio1" onclick="mudarBg(this.value, 'sua_img')" value="https://s3-sa-east-1.amazonaws.com/leroy-production//uploads/img/products/numero_para_residencia_numero_2_14_5_cmx10_cm_cromado_bemfixa_87963715_0001.jpg_1800x1800.jpg">Imagem 1.2 <br/>
<input type="radio" name="bgradio1" onclick="mudarBg(this.value, 'sua_img')" value="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/N%C3%BAmero_3_(manuscrito).svg/305px-N%C3%BAmero_3_(manuscrito).svg.png">Imagem 1.3 <br/>
<input type="radio" name="bgradio2" onclick="mudarBg(this.value, 'sua_img2')" value="http://cdn3.colorir.com/desenhos/pintar/numero-4_2.png">Imagem 2.1 <br/>
<input type="radio" name="bgradio2" onclick="mudarBg(this.value, 'sua_img2')" value="http://vignette2.wikia.nocookie.net/runescape/images/c/c1/N%C3%BAmero_5.png/revision/latest?cb=20120802141805&path-prefix=pt">Imagem 2.2 <br/>
<div style="display: inline-flex">
<img id="sua_img"/>
<img id="sua_img2"/>
</div>The changeBg function receives 2 parameters:
valor - is the value that is in the input, in my example I put the URL of the image. idImg - is the id of the <img> you want to change, eg the first 3 radio changes the first image while the last 2 radio changes the second image. The name attribute of the input groups the radios, so everyone with bgradio1 can only have one selected and the same thing pro bgradio2 .
-
checkbox :
function mudarBg(campo, idImg) {
if (campo.checked) {
document.getElementById(idImg).style.backgroundImage = 'url(' + campo.value + ')';
} else {
document.getElementById(idImg).style.backgroundImage = '';
}
}#sua_img {
display: block;
width: 250px;
height: 150px;
background-image: url('http://blog.trifork.com/wp-content/uploads/2014/09/Html5_canvas_logo.png')
}
#sua_img2 {
display: block;
width: 250px;
height: 150px;
background-image: url('http://mohitrickzz.heck.in/files/flags-dd-css.jpg')
}<input type="checkbox" onclick="mudarBg(this, 'sua_img')" value="http://jstricks.com/wp-content/uploads/2014/07/javascript-redirect.png">Imagem 1<br/>
<input type="checkbox" onclick="mudarBg(this, 'sua_img2')" value="http://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg">Imagem 2 <br/>
<div style="display: inline-flex">
<img id="sua_img"/>
<img id="sua_img2"/>
</div> The function mudarBg now receives the entire field, through it how to know if it was checked and what its value.
The secret is assigning CSS to background-image default and when I select checkbox I attribute a new background-image direct to style . That way when I remove checked it only clears the style attribute and retains CSS .