JAVASCRIPT IMAGES AND TEXT

    //MANIPULATING IMAGES AND TEXT 
    <img src="img1" onClick="makeInvisible()">
    
    document.getElementById('textExtra').className = "hidden"  //this removes previous classes
    document.getElementById('textExtra').className += " hidden"  //this adds to previous classes

    .hidden{display: none;} //and we have a class class in css

    //SWAPPING IMAGES
    <img src="img1" id="before" onMouseOver="swapPic(id, 'after-pic')" >
    function swapPic(eId, newPic){
        var pic = document.getElementById('image');
        pic.src = newPic + '.jpg';
    }

    //SWAPPING IMAGES AND SETTING CLASSES
    <img src="img1" id="before" onMouseOver="swapPic(id, 'after-pic')" >
    function swapPic(eId, newPic){
        document.getElementById('image').src = newPic + '.jpg';
    }

    //STYLES
    document.getElementById('image').style.visibility = 'none';
    document.getElementById('image').style.margin = '0 10px 0 10px';
    var m = window.getComputedStyle("mainPic").margin; //if it is not set in css, you can get the value with this