madpilot/response.html

## response.html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
      var resize = function() {
        $('altimg').each(function(i, e) {
          if($(e).css('display') != "none") {
            $('img[data-name=' + $(e).attr('data-name') + ']').attr('src', $(e).attr('src')).attr('alt', $(e).attr('alt'));
          }
        });
      }

      $(window).load(resize);
      $(window).resize(resize);
    </script>
    <style type="text/css">
      altimg {
        display: none;
      }

      @media screen and (min-width: 640px) and (max-width: 800px) {
        altimg.img-640 {
          display: block
        }
      }

      @media screen and (min-width: 800px) and (max-width: 1024px) {
        altimg.img-800 {
          display: block
        }
      }

      @media screen and (min-width: 1024px) {
        altimg.img-1024 {
          display: block
        }
      }
    </style>
  </head>
  <body>
    <img src="melbourne-500x500.jpeg" alt="500x500" data-name="melbourne">
      <altimg src="melbourne-640x480.jpeg" alt="640x480"class="img-640" data-name="melbourne"></altimg>
      <altimg src="melbourne-800x600.jpeg" alt="800x600" class="img-800" data-name="melbourne"></altimg>
      <altimg src="melbourne-1024x768.jpeg" alt="1024x768" class="img-1024" data-name="melbourne"></altimg>
    </img>
  </body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript">
	var resize = function() {
	$('altimg').each(function(i, e) {
	if($(e).css('display') != "none") {
	$('img[data-name=' + $(e).attr('data-name') + ']').attr('src', $(e).attr('src')).attr('alt', $(e).attr('alt'));
	}
	});
	}

	$(window).load(resize);
	$(window).resize(resize);
	</script>
	<style type="text/css">
	altimg {
	display: none;
	}

	@media screen and (min-width: 640px) and (max-width: 800px) {
	altimg.img-640 {
	display: block
	}
	}

	@media screen and (min-width: 800px) and (max-width: 1024px) {
	altimg.img-800 {
	display: block
	}
	}

	@media screen and (min-width: 1024px) {
	altimg.img-1024 {
	display: block
	}
	}
	</style>
	</head>
	<body>
	<img src="melbourne-500x500.jpeg" alt="500x500" data-name="melbourne">
	<altimg src="melbourne-640x480.jpeg" alt="640x480"class="img-640" data-name="melbourne"></altimg>
	<altimg src="melbourne-800x600.jpeg" alt="800x600" class="img-800" data-name="melbourne"></altimg>
	<altimg src="melbourne-1024x768.jpeg" alt="1024x768" class="img-1024" data-name="melbourne"></altimg>
	</img>
	</body>
	</html>