source: trunk/london.npemap.org.uk/index.html @ 698

Last change on this file since 698 was 541, checked in by Nick Burch, 14 years ago

Scale the front page map to fit

  • Property svn:eol-style set to native
File size: 2.9 KB
RevLine 
[533]1<!--#set var="title" value="Geographers' Authentic Map of London" -->
2<!--#set var="link" value="/" -->
3<!--#include virtual="inc/header.shtml" -->
4<script src="js/yahoo.js" type="text/javascript"></script> 
5<script src="js/dom.js" type="text/javascript"></script> 
6<script src="js/event.js" type="text/javascript"></script> 
7<script src="js/jsr_class.js" type="text/javascript"></script> 
8<script src="js/jscoord-1.1.1.js" type="text/javascript"></script> 
9<script src="js/prototype.js" type="text/javascript"></script>
10
11<div id="body">
[535]12<div class="left-col">
[533]13 On this site, you can view a 1956
14 <a href="http://www.a-zmaps.co.uk/">Geographers' Map Company</a> map of
[535]15 London. Simply click on the map to the right to get started.
[533]16</div>
17
[535]18<div class="right-col">
19 <ul>
20   <li>Questions? <a href="FAQ.html">FAQ</a></li>
21   <li>Problems? <a href="reportBug.html">Tell us</a></li>
22 </ul>
23</div>
[533]24
[541]25<div class="mid-col" id="map-col">
[535]26        <noscript>
27         This site requires javascript
28        </noscript>
29
30 <div id="map">
[533]31   <img src="/thumbnail.jpg" alt="Map of London" id="link" />
32   <br />
[541]33   <i>These maps are reproduced by kind permission of
34        the Geographers' A-Z Map Company, and are still in
35        <a href="/FAQ.html#licence">copyright</a>.</i>
[535]36 </div>
[533]37</div>
38
39<script type="text/javascript">
40function click(e) {
41    e = YAHOO.util.Event.getEvent(e);
42    var img = YAHOO.util.Event.getTarget(e);
43    var imgPos = YAHOO.util.Dom.getXY(img);
44
45    var x = (YAHOO.util.Event.getPageX(e) - imgPos[0]);
46    var y = (img.height-(YAHOO.util.Event.getPageY(e) - imgPos[1]));
47
48        // We scaled the image so there are 24 pixes per image
[539]49        var tile_x = Math.floor(x/24);
50        var tile_y = Math.floor(y/24);
[533]51        var tile_x_offset = x - (tile_x*24);
52        var tile_y_offset = y - (tile_y*24);
53
54        location.href="/tiles.html#"+tile_x+","+tile_y+",1";
55}
56
57// Attach an onclick action to the thumbnail image
58YAHOO.util.Event.addListener("link", "click", click);
[541]59
60// Attach a resize helper
61YAHOO.util.Event.addListener(window,'resize',doResize);
62
63screenWidth = -1;
64screenHeight = -1;
65function doResize() {
66  var newWidth = YAHOO.util.Dom.getViewportWidth();
67  var newHeight = YAHOO.util.Dom.getViewportHeight();
68  if (screenHeight != newHeight || screenWidth != newWidth) {
69        screenWidth = YAHOO.util.Dom.getViewportWidth();
70        screenHeight = YAHOO.util.Dom.getViewportHeight();
71
72                // Tweak the map size if required
73                var img_width = 624;
74                var img = $('link');
75                var text = $('map-col');
76                if(screenWidth >= 1175) {
77                        img.style.width = img_width + "px";
78                        text.style.width = '55%';
79                } else if(screenWidth >= 1000) {
80                        img.style.width = (screenWidth - 530) + "px";
81                        text.style.width = (screenWidth - 520) + "px";
82                } else if(screenWidth >= 700) {
83                        img.style.width = (screenWidth - 500) + "px";
84                        text.style.width = (screenWidth - 490) + "px";
85                } else {
86                        img.style.width = (screenWidth - 370) + "px";
87                        text.style.width = (screenWidth - 360) + "px";
88                }
89  }
90}
91doResize();
[533]92</script>
93
94</div>
95<!--#include virtual="inc/footer.shtml" -->
Note: See TracBrowser for help on using the repository browser.