DOF Test

by ntmw

HTML

<div>
   <table id="table-1" >
   <tr><td>
      <img id="img" src="http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg" name="pic" onMouseDown="test()"/>
       <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 img1 = new Image();
img1.src = "http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg";

var img2 = new Image();
img2.src = "http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg";


function test() {
    if (document.pic.src == 'http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg') {

        document.pic.src = 'http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg';
    }
    else if (document.pic.src == 'http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg') {

        document.pic.src = 'http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg';
    }
}