packages feed

hsdip-0.1: html/index.html

<html>
  <head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
    <style>
html, body {
  height: 100%;
  margin: 0;         
  font-family: sans-serif;
}
#mapview {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
}
img.layer {
  position: absolute;
  left: 0;
  top: 0;
}
#navbar {
  background: white;
  border-bottom: solid 1px black;
  border-right: solid 1px black;
  padding: 1ex;
  position: absolute;
  left: 0;
  top: 0;
}
a.arrow {
  padding: 0.1ex 0.4ex;
  text-decoration: none;
  color: black;
}
a.arrow:hover {
  background: black;
  color: white;
}
    </style>
    <script>
function $(x) { return document.getElementById(x); }
function registerHandlers() {
  var map = document.getElementById('mapview');
  var dragging = false;
  var drag_x = 0;
  var drag_y = 0;
  map.scrollLeft = (1152 - map.offsetWidth) / 2;
  map.scrollTop  = (965 - map.offsetHeight) / 2;
  map.onmousedown = function(e) {
    dragging = true;
    drag_x = e.clientX;
    drag_y = e.clientY;
    return false;
  }
  map.onmousemove = function(e) {
    if (dragging) {
      map.scrollLeft -= e.clientX - drag_x;
      map.scrollTop  -= e.clientY - drag_y;
      drag_x = e.clientX;
      drag_y = e.clientY;
    }
  }
  map.onmouseup = function(e) {
    dragging = false;
    return false;
  }
}
var curPage = 1;
function changePage(dir) {
  curPage += dir;
  $('map').src = curPage + '.png';
  $('curturn').innerHTML = curPage;
}
    </script>
  </head>
  <body>
    <div id='mapview'>
      <img class='layer' src='map.png' width='1152' height='965'/>
      <img id='map' class='layer' src='1.png' width='1152' height='965'/>
    </div>
    <div id='navbar'>
    <a href='#' class='arrow' onclick='changePage(-1); return false;'>◀</a>
    <span id='curturn'>1</span>
    <a href='#' class='arrow' onclick='changePage(1); return false;'>▶</a>
    </div>
    <script>registerHandlers()</script>
  </body>
</html>

<!-- vim: set ts=2 sw=2 et : -->