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
>