HideDisplay Example

HideDisplay Example -- Source Code

HTML Page -- index.htm

<!DOCTYPE html>

<!-- HideDisplay Example
Source code file: index.htm 
Show the difference between the
display and visibility properties. -->

<html lang="en">
    <head>
        <title>HideDisplay Example</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>

    <body>
        <h1>HideDisplay Example</h1>

        <!-- Images 1, 2, 3, and 4 -->
        <img id="1" src="images/1.png">
        <img id="2" src="images/2.png">
        <img id="3" src="images/3.png">
        <img id="4" src="images/4.png"><br><br>

        <!-- Checkboxes to hide or display images -->
        <input type="checkbox" id="chk1d" checked>
        <label for="chk1d">Image1 Display/Hide</label><br>
        <input type="checkbox" id="chk2d" checked>
        <label for="chk2d">Image2 Display/Hide</label><br>
        <input type="checkbox" id="chk3d" checked>
        <label for="chk3d">Image3 Display/Hide</label><br>
        <input type="checkbox" id="chk4d" checked>
        <label for="chk4d">Image4 Display/Hide</label><br><br>

        <!-- Checkboxes to set or clear visibility -->
        <input type="checkbox" id="chk1v" checked>
        <label for="chk1v">Image1 Set Visibility</label><br>
        <input type="checkbox" id="chk2v" checked>
        <label for="chk2v">Image2 Set Visibility</label><br>
        <input type="checkbox" id="chk3v" checked>
        <label for="chk3v">Image3 Set Visibility</label><br>
        <input type="checkbox" id="chk4v" checked>
        <label for="chk4v">Image4 Set Visibility</label>
    </body>
</html>

CSS Page -- styles.css

/* HideDisplay Example
Source code file: styles.css
Show the difference between the
display and visibility properties. */

* { font-family: Helvetica, Arial, sans-serif; }
body { background-color: #E0E0FF; }
img { width: 100px; height: 100px;
padding: 5px; margin: 5px; }

Script Page -- script.js

// HideDisplay Example
// Source code file: script.js
// Show the difference between the
// display and visibility properties.

// Hide or display Image 1.
function hideImage1( ) {
    var img1 = document.getElementById("1");
    var chk1 = document.getElementById("chk1d");
    img1.style.display = 
        (chk1.checked) ? "inline" : "none";
}

// Hide or display Image 2.
function hideImage2( ) {
    var img2 = document.getElementById("2");
    var chk2 = document.getElementById("chk2d");
    img2.style.display = 
        (chk2.checked) ? "inline" : "none";
}

// Hide or display Image 3.
function hideImage3( ) {
    var img3 = document.getElementById("3");
    var chk3 = document.getElementById("chk3d");
    img3.style.display =
        (chk3.checked) ? "inline" : "none";
}

// Hide or display Image 4.
function hideImage4( ) {
    var img4 = document.getElementById("4");
    var chk4 = document.getElementById("chk4d");
    img4.style.display = 
        (chk4.checked) ? "inline" : "none";
}

// Set visible Image 1.
function setVisibilityImage1( ) {
    var img1 = document.getElementById("1");
    var chk1 = document.getElementById("chk1v");
    img1.style.visibility = 
        (chk1.checked) ? "visible" : "hidden";
}

// Set visible Image 2.
function setVisibilityImage2( ) {
    var img2 = document.getElementById("2");
    var chk2 = document.getElementById("chk2v");
    img2.style.visibility = 
        (chk2.checked) ? "visible" : "hidden";
}

// Set visible Image 3.
function setVisibilityImage3( ) {
    var img3 = document.getElementById("3");
    var chk3 = document.getElementById("chk3v");
    img3.style.visibility = 
        (chk3.checked) ? "visible" : "hidden";
}

// Set visible Image 4.
function setVisibilityImage4( ) {
    var img4 = document.getElementById("4");
    var chk4 = document.getElementById("chk4v");
    img4.style.visibility = 
        (chk4.checked) ? "visible" : "hidden";
}

function init( ) {
    // Attach event handlers for display/hide buttons.
    var chk1 = document.getElementById("chk1d");
    chk1.addEventListener("click", hideImage1);
    var chk2 = document.getElementById("chk2d");
    chk2.addEventListener("click", hideImage2);
    var chk3 = document.getElementById("chk3d");
    chk3.addEventListener("click", hideImage3);
    var chk4 = document.getElementById("chk4d");
    chk4.addEventListener("click", hideImage4);

    // Attach event handlers for visibility.
    var chk1 = document.getElementById("chk1v");
    chk1.addEventListener("click", setVisibilityImage1);
    var chk2 = document.getElementById("chk2v");
    chk2.addEventListener("click", setVisibilityImage2);
    var chk3 = document.getElementById("chk3v");
    chk3.addEventListener("click", setVisibilityImage3);
    var chk4 = document.getElementById("chk4v");
    chk4.addEventListener("click", setVisibilityImage4);
}

// Attach event handlers after window is loaded.
window.addEventListener("load", init);