Ulter image using range slider control

Asked by At

I have a range slider control which I want the users to use it to alter the size and the position of the displayed image. At the moment I have a radio button where the user used to pick a background. I also have a checkbox where user can select to display image. I need some assistance with the slider control for the user to use to alter the display image. fiddle link

//select a background
function backgd() {
    var bg1 = document.getElementById("radio-bg1");
    var bg2 = document.getElementById("radio-bg2");
    
    var bg = document.getElementById("background");
    if (bg1.checked) {
        bg.src = "../images/dolphins/background2.jpg";

    } else if (bg2.checked) {
        bg.src = "../images/dolphins/background3.jpg";

  }



//select image to display
var image=document.getElementsByClassName("images");
function displaybgimage() {
    for(var i=0;i<image.length;i++) {
        image[i].style.visibility = "hidden";
        var chek1 = document.getElementById("check-img1");
        var chek2 = document.getElementById("check-img8");

 if (chek1.checked) {
              image[i].style.visibility = "hidden";
             image[0].style.visibility = "visible";
        
         } else if (chek2.checked) {
              image[i].style.visibility = "hidden";
             image[1].style.visibility = "visible"; 
}
<!--user select image to display-->
<div id="container">
            <img id="background" src="../images/dolphins/background1.jpg" alt="background image" title="background image">

            <!-- image -->
            <img id="dolphin1" class="images" src="../images/dolphins/dolphin1.png" alt="dolphin 1" title="dolphin 1">
            <img id="dolphin2" class="images" src="../images/dolphins/dolphin2.png" alt="dolphin 2" title="dolphin 2">
            
        </div>

0 Answers