Tube Map With Jquery
I have just written this code to display a semi interactive tube map of the london underground network.
I am building it up to be an informative map showing more information that is just told on the map.
Feel free to view source on this page and nick the code... but PLEASE... take the images too and not hot link me.
syntax highlighting by Code Highlighter
1 < style type ="text/css" >
2 * { border : 0px }
3 #demo { width : 500px ; height : 350px ; overflow : hidden ; }
4 #draggable { width : 1400px ; height : 1000px ; padding : 0px ; margin : 0px ;
5 background : url(http://www.tfl.gov.uk/assets/downloads/standard-tube-map.gif) ; }
6 style >
7 < script type ="text/javascript" src ="/apis/jquery.js" > script >
8 < script type ="text/javascript" src ="http://jqueryui.com/ui/ui.core.js" > script >
9 < script type ="text/javascript" src ="http://jqueryui.com/ui/ui.draggable.js" > script >
10 < script type ="text/javascript" >
11 $( function () {
12 $( " #draggable " ).draggable({ scroll: false });
13 });
14 script >
15 < span id ="demo" >
16 < span id ="draggable" class ="ui-widget-content" >
17 < img src ="/trans.gif" id ="img" width ="1400" height ="1000" alt ="tube map" usemap ="#tubemap" />
18
19 < map name ="tubemap" id ="tubemap" >
20 < area shape ="circle" coords ="250,250,500" href ="#" alt ="Mercury" border ="1" />
21 map >
22 span >
23 span >
Copyright 2011 CodersAdvocate ©