topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

graphic-javascript-effect-image-navigate-effect.htm / htm



  <head>
  <script>
  #largeImage {
          position:relative;
          width:150px;
          height:100px;
          border:1px solid #000000;
          background-image:url("graphic-javascript-effect-image-testz.gif");
          background-repeat:no-repeat;
          background-position:0px 0px;
  }
  </script>
  
  <script type="text/javascript" src="graphic-javascript-effect-image-navigator.js"></script>
  </head>
  <body>
  
  <p>
  Click and drag the red outlined square on the bottom photo to navigate the zoomed image.</p>
  <div id="largeImage"></div>
  <div id="smallImage">
  <!--  This image must actually be double the size listed below  -->
    <img src="testz.gif" width="250" height="155">
          <div id="marker"></div>
  </div>
  
  </body>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.