Map for buttons ? need help please

Hi,

I would like to use a map link for a site entrance where the user picks their region.

it will either be UK or Ireland.

So if they click on say England it will go to UK and if they click on Southern Ireland it will go to Ireland.

Does anyone have any tips on how to best do this?

Can yo be a bit more specific, when you say

So if they click on say England it will go to UK
Obviously there is a difference between the two regions, but what are those differences, what is the purpose of the site etc etc etc

If I think I understand you right, you want to redirect people to two different sections of your website. If so! There are many ways of doing this you could have all off your pages in the root directory with sort of extension to their original name; about_us_ie.html about_us_uk.html. Another option would be to have two different folders, one for each region, or working with sub domains. But as I said before, maybe it’s a good idea to give us some insight where you’re after.

Here is a good resource for clickable maps
http://commons.wikimedia.org/wiki/Category:Clickable_maps

There are none exclusively for Europe or the United Kingdom, but it wouldn’t be that difficult to take this clickable world map and modify it just for your area of interest.

http://commons.wikimedia.org/wiki/Template:Clickable_world_map

another option is to find an appropriate map and then use it as an image map so that users can be taken to the url associated with the area they click on the map.

Here is a clickable map of the United Kingdom that uses an image map
http://www.flagchart.net/flags/gb(.html

that’s probably exactly what the OP wants :slight_smile: but beware of the the copyright notice at the bottom of it :shifty:

Exactly. The OP can take and modify the HTML code, but the images he should instead source from somewhere like wikimedia, such as:

What is OP?

I have the two sites split into two directories.

index page takes users for uk onto index_2.html within the same directory.

ireland users go from index to ireland/index.html

I had a jump menu but its not exactly exciting.

Maybe an image map is the way to go?

OP = Original Poster afaik or perhaps Old Poster or Other Person :lol:

and yep, imho an image map is a good way to go :slight_smile:

Just need to find a nice UK map and i’ll give it a go :slight_smile:

The following UK outline map seems to be a good choice.

I’ll just throw it out there: you can also make CSS image maps. Underneath, you just have clickable list items like normal. Then it doesn’t matter if the image even loads or not.

Thanks to all so far.

An update on my progress! Here is what I did for static image map…

 <img src="map_2.jpg" alt="Entrance Map" width="450" height="552" border="1" usemap="#Map" />
 <map name="Map" id="Map">
   <area shape="poly" coords="182,543,461,506,353,-4,275,81,202,98,131,138,116,191,210,313,215,338,180,287,160,237,130,294,110,312,98,325,114,338,123,342,139,329,155,349,179,345,222,318" href="index_2.html" alt="Entrance Map" />
   <area shape="poly" coords="161,353,171,385,165,439,57,478,19,444,29,368,35,333,91,323,94,289,127,279,135,277" href="ireland/index.html" alt="Ireland Entrance" />
 </map>

I need a little more help :rolleyes:

I’d like to ad a hover feature where when you hover over the uk it willl turn a different colour…same for ireland.

is this difficult, and would it be a different process to the coordinates I have plotted?

There’s a useful jQuery plugin called maphilight for doing just this.

I have an image map for FL County Auctions on my site where the user can click on a county and it directs to a page of relevent info. The map is sectioned into areas, where if clicked within that region it acts as the link itself.

Process: I found a map and saved as jpg. Exported into Picasa 3 so I could add text to the map, easy to do. I then exported to a file on my pc, when exporting you can change the image size.

I uploaded the the graphic to my site, looked at the source code to find the url for the image and size of image. I then entered griphic’s url into draac.com’s image mapper. It recreated my map on the page so I could gather coordinates and it’s free. Just go to the area of the map you would like to create as a link and click, starting in the top left corner and working clockwise aroud the border area which will be linked to your relevant page. I then copy/ pasted those coordinates into this code.

<img src=“URL for map image goes here.jpg” border=5 height=470 width=480 usemap=“#mymap2”>
<map name=“mymap2”>

<area shape=“poly”
coords="309,89 314,85 320,85 327,88 334,90 338,95 338,103 338,111 331,107 318,108 315,109 312,101 309,101 310,90 " href="URL of page that user will be sent to if clicks within coordinates.html" alt=AlachuaCounty>

<area shape=“poly”
coords=“next area coordintes” href=“the tier 3 you want to link to from the map” alt=The mouseover tag that appears>

<area shape=“poly”
coords="115,20 115,23 121,23 125,23 126,23 128,19 129,16 130,19 132,20 132,23 133,31 133,36 130,34 128,36 124,37 120,37 112,36 110,31 110,29 112,26 113,24 113,23 "
href="URL of relevant page when clicked within above coords" alt=WashingtonCounty>
</map>

The image source is the url of your graphic. Make sure the height and width you enter in the above code is the same as appears when looking at the source code when you posted the image to a page. If they are different your links won’t be in the right spots. Each new “<area shape=etc,etc” creates a new area which is linked to a page.

I hope this makes sense and is useful, I don’t know much but it worked for me.
If you don’t want to go the free/tedious route, PaintShopPro can also help with the image mapping and it is easier to use.

Thanks for your reply!

I already have the coordinate thing down, its a hover effect I need to create when the user hovers over the country.

:frowning:

One possible advantage of CSS is the ability to use :hover (and :focus) to change the map. And the user doesn’t need JS enabled.

Admittedly the disadvantages are as follows:
-lots of CSS code (less if you’re not supporting IE6, it has a nasty bug here)
-you are stuck with square shapes (the images fake poly, but the mouse knows better)
-Your image is bigger in filesize (because it contains the “hover” versions as well) though this is better than swapping whole new images
-unlike the nice link Paul has to “maphighlight” above, CSS can’t do any fading-in (hey, they did Michigan wrong! Arg… Yoopers might think they’re separate, but they’re not… they should highlight when the Lower Penninsula highlights).

But, you can still do something like this with plain Javascript too. You would likely need full image swapping (where whenever an area gets an onmouseover, the img tag above’s url gets swapped with another url, to another image which happens to have UK or Ireland in another colour) and so maybe some Javascript image-preloading is desired (but, either way, you’re adding more calls to the server).

Only way I could think you could get away with an image sprite is using overflow: hidden on a larger (and positioned) image, so the “hover” section can’t be seen, and then have Javascript just either set new positioned coords, or change the margins. I suspect that’s tricker cross-browser though. You’ll also have to check that the alt text is readable at all times (should be since it’s in the map and not the image itself).