Clickable Geographical Map Regions - Relationship between Geographical Regions and Image-Maps
(Page 2 of 4 )
Realize that the outline of a geographical map looks like an irregular polygon. So to make a region of a geographical map clickable, think of its outline as an irregular polygon, then look for the coordinates of the vertices of this outline. In the HTML document, these coordinates will form the coordinates of an AREA element with a polygon shape. The AREA element is, of course, part of the image-map. To make all the geographical regions of the map clickable, the MAP element will consist of AREA elements with polygon shapes and each AREA element will have the coordinates of the region.
Creating coordinates
If you look at the map of any country, you will notice that the number of vertices and, hence, the number of coordinate pairs are many. In this section, I show you how you can get the coordinates using JavaScript. We shall use the map of Western Europe below to illustrate this.
We shall make the regions of Portugal, Spain and France clickable.
In terms of tools for this project, you need a text editor (notepad) and a browser.
Using your text editor, copy and paste the following and save the file with the name "coords.htm" in a directory. In this same directory, save the image of the map of Western Europe with the name europeMap.jpg (beware of the image type).
<html>
<head>
<style type="text/css">
body {margin:0px; padding:0px}
</style>
<script type="text/javascript">
var coordStr = ""
function createCoords(event)
{
x=event.clientX;
y=event.clientY;
if (coordStr == "")
{//the first time we start without a comma
coordStr = coordStr + x + "," +y ;
}
else
{
coordStr = coordStr + "," + x + "," +y ;
}
}
function showCoords(event)
{
if (event.button==2)
{
myWindow=window.open();
myWindow.document.write(coordStr);
//reset the string
coordStr = "";
myWindow.focus();
}
}
</script>
</head>
<body onclick="createCoords(event)" onmousedown="showCoords(event)">
<img src="europeMap.jpg">
</body>
</html>
Next: Code Explained >>
More HTML Articles
More By Chrysanthus Forcha
