DOF Test

HTML

<div>
   <table id="table-1" >
   <tr><td>
      <img id="img" src="http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg" name="pic"/>
       <img id="png1" src="http://www.thedigitaltrekker.com/wp-content/uploads/2012/03/logo-6smA.png"/>
Click on the image above to toggle between 19mm and 200mm <br>
   </td></tr>
   </table>
</div>

CSS

body
{
background-image:url('http://www.thedigitaltrekker.com/wp-content/uploads/2012/06/Vbg.dark_-250x180.jpg');
background-repeat:repeat;
}

html, body {
    height: 100%;
    color: white
  }
  #table-1 {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
  }
  #table-1 img {
    display: block;
    margin: 0 auto;
  }
  
   #img {
max-width: 100%;
    height: auto;
    width: auto\9; 
    cursor: pointer;
    }

#png1 {
    position:relative;
    bottom:50px;
    left: -20%;
    z-index:1;
    max-width: 100%;
    height: auto;
    width: auto\9; 

}

JavaScript

var url1 = "http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg";
var url2 = "http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg";

var img1 = new Image();
img1.src = url1;

var img2 = new Image();
img2.src = url2;


$("#img").on("click touchstart", function(e){
    if (this.src == url1) {
        this.src = url2;
    }
    else if (this.src == url2) {
        this.src = url1;
    } 

    e.preventDefault();
});