Image dimming

Experiments with image dimming on different background colors

by carolynlm

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form name="color" method="post" action="">
<label>Background color</label>
<p>
<input type="radio" name="color" value="radio" onClick="changeColour('Default')">Default
<input type="radio" name="color" value="radio" onClick="changeColour('Sepia')">Sepia
<input type="radio" name="color" value="radio" onClick="changeColour('Dark')">Dark
</form>

<form>
    <label>Image opacity</label>
    <br>
    <input type="range" name="bgopacity" id="bgopacity" value="50" min="0" max="100" step="1" onchange="rangevalue.value=value">
    <output id="rangevalue">50</output>
</form>
<div class="background-image"></div>

<br>
<hr>
<br>

<form>
    <label>Document opacity</label>
    <br>
    <input type="range" name="bgopacity" id="bgopacity2" value="50" min="0" max="100" step="1" onchange="rangevalue.value=value">
    <output id="rangevalue">50</output>
</form>
<div class="background-document"></div>

CSS

.background-image {
    width: 250px;
    height: 250px;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/66/Polar_Bear_-_Alaska_%28cropped%29.jpg');
    opacity: .5;
}

.background-document {
    width: 250px;
    height: 250px;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/SER_marcus_decl.djvu/page1-461px-SER_marcus_decl.djvu.jpg');
    opacity: .5;
}

JavaScript

// Image opacity Slider
$('#bgopacity').on('change', function (value) {
    $('.background-image').css({
        opacity: $(this).val() * '.01'
    });
});

// Document opacity Slider
$('#bgopacity2').on('change', function (value) {
    $('.background-document').css({
        opacity: $(this).val() * '.01'
    });
});

//Background color
window.changeColour = function(value)
{
    var color = document.body.style.backgroundColor;
    switch(value)
    {
        case 'Default':
            color = "#FFF";
        break;
        case 'Sepia':
            color = "#FEF6E7";
        break;
        case 'Dark':
            color = "#2E3136";
        break;
    }
    document.body.style.backgroundColor = color;
}