How do I change the function of a button when the window size changes?

Question

So I have two images, one for higher than 1440px wide resolution and one for lower. I have a button to toggle on this image, unfortunately I can't figure how to get it to work so it toggles on the lores image below 1440px or the hires image above 1440px. Plus now my toggle_off function doesn't work with my attempted js to get it to work.

CSS:

.p_works
{
    width:100%;
}
@media (min-width: 1440px){
        #art1
        {
            display:inline;
        }
        #art1_lores
        {
            display:none;
        }
        #art2
        {
            display:none;
        }
        #art2_lores
        {   
            display:none;
        }
        }
@media (max-width: 1440px){
        #art1
        {
            display:none;
        }
        #art1_lores
        {
            display:inline;
        }
        #art2
        {
            display:none;
        }
        #art2_lores
        {   
            display:none;
        }
        }

I don't really know javascript so this is an attempt I'm sure is wrong, also I don't even know if I need to load a script for mathcmedia.

Javascript:

<script type="text/javascript">
    function toggle_on(id) {
        var hires = document.getElementById(id);
        var lores = document.getElementById(id) +'_lores';
        if (window.matchmedia("(min-width: 1440px)").matches) {
            hires.style.display = 'inline';
        }
        else {
            lores.style.display = 'inline';
        }
    }
    function toggle_off(id) {
        var e = document.getElementById(id);
        if(e.style.display = 'inline') 
        e.style.display = 'none';
    }
</script>

HTML:

<a href="#" onclick="toggle_on('art1'); toggle_off('art2'); toggle_off('art2_lores')">
            <img class="icons" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/icons/typewriter.jpg" alt="typewriter"/>
</a>
<a href="#" onclick="toggle_on('art2'); toggle_off('art1'); toggle_off('art1_lores');">
            <img class="icons" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/icons/wasting-water.jpg" alt="wasting water"/>
</a>
<img class="p_works" id="art1" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/Typewriter.jpg" alt="typewriter"/>
<img class="p_works" id="art1_lores" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/lores/Typewriter.jpg" alt="typewriter"/>
<img class="p_works" id="art2" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/wasting-water.jpg" alt="wasting water"/>
<img class="p_works" id="art2_lores" src="https://dl.dropboxusercontent.com/u/70582811/Website/Redesign/works/artwork/wasting-water.jpg" alt="wasting water"/>

you can see where I am here: http://www.dillonbrannick.com/redesign

The buttons are on the right; the icons, only the first two should work as of my code, but they do not.

CodePen

Answer 1

Perhaps this way :

window.onresize = function(event) {
      var w=window.outerWidth;
      var h=window.outerHeight;


      // Size specific code here
}

Answer 2

function toggle_on_hires(id) {
        var e = document.getElementById(id);
        var w = window.innerWidth;
        if(w > 1440){
            e.style.display = 'inline';
        }
        else{
            e.style.display = 'none';
        }
    }
    function toggle_on_lores(id) {
        var e = document.getElementById(id);
        var w = window.innerWidth;
        if(w <= 1440){
            e.style.display = 'inline';
        }
        else{
            e.style.display = 'none';
        }
    }

I then called #art1 with toggle_on_hires and #art1_lores with toggle_on_lores. So now it toggle the lower res image when the window resolution is below 1440px wide and higher resolution image when it's above.