CodersAdvocate

I work hard, so you don't have to

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 >
tube map Mercury
1247500470.gif 1247500568.gif
Copyright 2011 CodersAdvocate ©