Why do all images but one have responsive size?

Question

How can I make the bigger KNIGHT-IMAGE responsive like the other images?

I have this site: http://stephaniie.com/_testlab/beta1/

Full html code: http://pastebin.com/u4HpxcB2

If you scroll down, on the right, there is Knight next to a Tower.

• If you move your mouse from his right side.. an bigger KNIGHT-IMAGE appears. "Talking" starts and text + animation of the little pixel knight.

• If you move the mouse away the bigger KNIGHT-IMAGE disappear he says "Goodbye" and animation + text stops.

This is made by some pretty easy coding.

For the bigger KNIGHT-IMAGE to appear/hide this CSS and JavaScript is used:

Original Source: http://clba.nl/sitepoint/img-hover-demo-js1.htm

<style>
    #img2{
        position: absolute;
        top: 1600px;
        left: 100px;
        display: none;
        width: auto;
        height: auto;
     }
</style>

<script>
    var img1 = document.getElementById("sol"),
    img2 = document.getElementById("img2");

    img1.onmouseover = function() {
        img2.style.display = "block";
        if (document.images) document.getElementById('img_id12').src = 'assets/images/text/day/12solaire-ani.gif';  PlaySound('solaire');
    }

    img1.onmouseout = function() {
        img2.style.display = "none";
        if (document.images) document.getElementById('img_id12').src = 'assets/images/no-text/day/12.gif'; StopSound('solaire'); PlaySound('solaire-stop');
    }   
</script>

For the music to start playing a PlaySound/StopSound JavaScript is used.

Original Source: Javascript play sound on hover. stop and reset on hoveroff

   <script>
    function PlaySound(soundobj) {
        var thissound=document.getElementById(soundobj);
        thissound.play();
    }
    function StopSound(soundobj) {
        var thissound=document.getElementById(soundobj);
        thissound.pause();
        thissound.currentTime = 0;
    }
    </script> 

How can I make the bigger KNIGHT-IMAGE responsive like the other images? If you re-size the screen you notice all images changes size, all but the bigger KNIGHT-IMAGE - which appear when you hover the smaller knight located right next to the tower. Otherwise, the scripts work perfectly.

• Mouseover = bigger Knight-Image appear, Animation/Text appear on Knight, Sound start.
• Mouseout = bigger Knight-Image hides, Animation/Text disappear from Knight, Sound stops, Goodbye sound start.

For HTML on the website I use <map> and <area> to make an Image map.

Code is:

<img src="assets/images/no-text/day/12.gif" usemap="#map12" id="img_id12"/>

<map name="map12" id="img_id12">
<area class="youtube" id="sol" href="https://www.youtube.com/embed/skV-q5KjrUA" coords="3890,23,3970,100" shape="rect" style="outline:none;" />
</map>  

The only thing I want is too make the bigger KNIGHT-IMAGE have responsive size.

Edit and more information

I'm also using two JavaScript tools called Colorbox and Responsive Image Map:

• Colorbox is a a jQuery lightbox script. Source: http://www.jacklmoore.com/colorbox/
• Responsive Image Map allows image maps to be resized with screen-size. Source: http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

The code to use them on Index page is this.

<script>
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});
$(document).ready(function(){
    //Examples of how to assign the Colorbox event to elements
    $(".youtube").colorbox({iframe:true, innerWidth:1024, innerHeight:576});
});
/script>

Full code for Responsive Image Map script and Colorbox is found here.

Responsive Image Map script:

<script src="assets/js/jquery.rwdImageMaps.min.js"></script>

Link: http://pastebin.com/699T5kLY

Colorbox:

<link rel="stylesheet" href="assets/colorbox-assets/colorbox.css" />                                        <!-- COLORBOX -->

Link: http://pastebin.com/Jj4SQEhu

    <script src="assets/colorbox-assets/jquery.colorbox.js"></script>

Link: http://pastebin.com/bErhvPFA