main.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>HTML5 and Dijkstra Algorithm Map Navigation Demo by Gz-software</title>
    <meta name="description" content="HTML5 and Dijkstra Algorithm Map Navigation Demo by Gz-software" />
    <meta name="keywords" content="map navigation,dijkstra,shortest path,Gz-software,Pango Leung" />
    <meta name="author" content="Pango Leung" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
    <script>!window.jQuery && document.write('<script src="./js/jquery-1.4.2.min.js"><\/script>')</script>
    <script src="./js/dijkstra.js" type="text/javascript"></script>
    <script src="./js/map.js" type="text/javascript"></script>
    <style type="text/css">
        canvas
        {
            background: url(./images/map.jpg) no-repeat;
            float:left;
        }
    </style>
</head>
<body> 
<table border="0" bgcolor="#000000" width="802" style="border: solid 1px #8B8B00; bgcolor:#cccccc">
<tr>
<td>
<font color=white><b>HTML5 and Dijkstra Algorithm Map Navigation Demo by <a href="www.gz-software.com" style="color:white">Gz-software</a> </b></font>
</td>
<td>
<div id="xycoordiv" style="color: #00ffff"> </div>
</td>
<td width="80">
<input id="btnClear" type="button" value="reload" />
</td>
</tr>		
</table>
    <div id="div1" onmousemove="getCo(event)" onmouseout="clearCo()" style="width: 1350px;height: 855px; ">
        <canvas id="myCanvas" width='855' height='900'>Canvas</canvas>
    </div>
</body>
</html>