Javascript image exchange checkbox

Question

I need, in a project, an interaction that consists of 5 checkboxes, that when marked, change the image src on the page.

I already found a ready one, actually: http://jsfiddle.net/y015gunx/1/

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’t (because I don’t know anything about Javascript).

Is this script the best solution for this? How would I add another image and another checkbox?

Answer 1

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 I think it would be when you select 2 checkboxs to change the same image, which prevails and why it would leave the 2 checked?

Example:

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>

Explanation:

The changeBg function takes 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 <img> that you want to change, example the first 3 radio change the first image while the last 2 radio change the second image.

The attribute name of input groups the radio, then all who possess bgradio1 can only have one selected and the same thing pro bgradio2.

-

Example with 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 whole field, through it how to know if he was checked and what its value.

The secret is assigning CSS with a background-image standard and when I select the checkbox i assign a new background-image right in the style. That way when I remove the checked it only clears the attribute style and maintains the CSS.