Member Avatar for 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?

  • 6 Contributors
  • 7 Replies
  • 181 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

A concise, practical path forward (build, embed, test)

Several good starting ideas are already on the table ( asked the original question; and pointed out image maps; mentioned map APIs; and shared resources). For a solution that is maintainable, responsive, and accessible today, prefer a vector-based approach (inline SVG) or a lightweight mapping library when you need tiles/zoom. SVG gives precise, stylable hotspots that scale to any screen and are much easier to maintain than bitmap image maps or Flash.

Recommended workflow

  1. Draw the UK outline and regions in a vector editor (Inkscape/Illustrator). Export as clean SVG and give each region a meaningful id and a short title for accessibility.
  2. Inline the SVG inside your HTML template (or embed via <object> if you need a separate file). Use CSS for hover/focus styles and attach click handlers with JavaScript to open the target URLs or to show a tooltip/panel. Include an accessible fallback: a visible list of links for keyboard/screen-reader users.
  3. Test for touch (larger hit areas), keyboard navigation, and different viewport sizes. Use feature detection and progressive enhancement so the map degrades gracefully.

Minimal SVG example (illustrative)

<svg viewBox="0 0 1000 1200" xmlns="http://www.w3.org/2000/svg">
  <a href="https://example.com/region" target="_blank" rel="noopener">
    <path id="region-name" class="region" d="M..." />
    <title>Region name</title>
  </a>
</svg>

Notes and resources
If you need geospatial features (tiles, panning, coordinate layers) use a lightweight library like Leaflet. For SVG fundamentals and accessibility guidance see MDN SVG docs and WAI-ARIA practices. Avoid Flash and rely on progressive enhancement so the map works for everyone.

Recommended Answers

All 7 Replies

Member Avatar for oviyarajan

check this link

Member Avatar for 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?

Member Avatar for 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?

Member Avatar for 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.

Member Avatar for 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

Member Avatar for almostbob

google maps api

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.