Interactive Map of UK

[chris_j_haines]

Hi

I have been asked by someone to build a map of the UK and put links on it to different websites dependant on the area.

I am so stuck and really dont know how to achieve this?

Can anyone give me any advice?

[oviyarajan]

check this link http://rtlin1.dl.ac.uk/gridmon/

[pixelpaintr]

What exactly are you stuck on? You can use a static graphic with an image map over it that when clicked launches the page licks (html), or you can also make a Flash version of the map, with the graphics and interactivity all in the .swf file. The Flash version would allow for some fun animation on rollover, etc.

Does that help?

[chris_j_haines]

What exactly are you stuck on? You can use a static graphic with an image map over it that when clicked launches the page licks (html), or you can also make a Flash version of the map, with the graphics and interactivity all in the .swf file. The Flash version would allow for some fun animation on rollover, etc.

Does that help?

I know you can do it with image maps but i am not too familiar with using image maps. Also I have practically no experience with flash. how can i do it with image maps where I can embed the into into a template?

[pixelpaintr]

If you create an image map, it's just html - so you should be able to just copy and paste the lines of code into the template. You would find this pretty easy to do with Dreamweaver. You just import the image, select a type of image map shape (you'll want the polygon) click point by point and connect to the end to get a shape that follows the area of each hotspot, then with the hotspot selected, you enter the web address you want to visit on click. Here's a Youtube video about it:
http://www.youtube.com/watch?v=axefzAckCYA

If you don't have Dreamweaver, you can download it and use it for 30 days for free. This is much easier than trying to figure out the coordinates for every point and typing in by hand.

Once you have this done in a sample html page (test all the links!) you can copy the html from that and paste into your template.

[pcmaster]

i came across this great tutorial for creating an interactive map using Jquery. check it out on the lynda.com website at http://www.lynda.com/jQuery-1-5-tutorials/jQuery-Projects-Creating-an-Interactive-Map/80444-2.html , it's not so expensive to become a member on thier site and if you're reslly serious about it.

[bivent]

Check your design software to see if it already has that capability to map hotspots to images, if not you can use something like this:
(reference ponts are from top left of image in pixels)

<map id="ImgMap0" name="ImgMap0">
<area alt="alt text details" coords="167, 27, 27" href="link.html" shape="circle" />
<area alt="alt text details" coords="184, 85, 322, 189" href="link2.html" shape="rect" />
</map>
<img alt="alt text details" height="pixels" width="pixels" src="image.jpg" usemap="#ImgMap0" />

Hope this makes sense

[almostbob]

google maps api