Clickable Geographical Map Regions - Code Explained
(Page 3 of 4 )
This is code for a web page whose body element has a margin and padding width of zero pixels. The image is the only content for the BODY element. In this way, the image will appear in the browser, starting from the left-top corner of the client area where the x,y coordinates are (0px, 0px).
Open the above file in a browser. Click the vertices of the outline of Portugal (ignore the details). Right-click anywhere on the page (not on the image). Another web page window will open giving you the coordinates. Before we continue, let me explain what has happened.
Each time you click a vertex on the outline of Portugal, the onclick event of the BODY element calls the createCoords(event) function. This function gets the x,y client coordinates of the page and stores (adds) it in a string. Note that for this situation, the client coordinates are the same as the image coordinates, since the left-top corner of the image coincides with the left-top corner of the client area of the page. This was done intentionally by removing the margin and padding of the BODY element.
The coordinates for the image-map (AREA elements) are relative to the left-top corner of the image, independent of where the image is placed on the web page. The coordinates gathered by clicking, as we have done above, are relative to the left-top corner of the client area of the browser window (because the function has not taken the presences of the image into consideration - it does not have to). Since the left-top corner of the image in this window is the same as the left-top corner of the window's client area, the coordinates obtained can only be the coordinates for the image region, relative to the left-top corner of the image.
When you right-click on the page, the onmousedown event of the BODY element calls the showCoords(event) function. This function opens a new browser window and writes the value of the string to it.
Next, copy these coordinates and paste them in a new text editor window. These are the coordinates for the outline of the image of Portugal. Repeat this process for the outlines of Spain and France. You should now have the coordinates for Portugal, Spain, and France.
The next thing to do is design your web page, which will have clickable geographical regions (the web page you are creating here is the one you will host in the web server). To complete the demonstration, use the code below for this web page.
<html>
<head>
<style type="text/css">
img {border:0px}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td width="100">
</td>
<td>
<img src="europeMap.jpg" usemap ="#M1">
<map id="M1">
<area alt="Click to know more about Portugal" href ="moreOnPortugal.htm" shape ="poly" coords ="21,317,19,323,21,329,20,331,19,330,18,334,13,343,10,346,8,350,9,
356,11,356,10,360,10,365,7,369,10,372,15,372,17,375,20,373,20,368,
25,363,25,358,27,354,26,351,26,348,27,346,30,344,33,338,33,336,33,
333,33,332,37,331,39,329,39,328,38,326,37,324,35,324,34,323,31,324,
28,322,27,322,26,319,23,319">
<area alt="Click to know more about Spain" href ="moreOnSpain.htm" shape ="poly" coords ="21,319,26,319,26,322,30,322,32,322,38,325,40,328,38,330,33,333,
31,344,26,348,27,353,23,359,26,363,22,366,20,371,24,374,26,376,28,
383,32,390,37,384,42,384,44,383,48,383,51,384,55,384,58,387,60,385,
63,387,71,379,76,379,78,373,87,368,84,366,84,366,83,359,83,357,94,
346,96,344,105,343,109,341,112,338,116,333,113,331,106,331,102,
328,97,325,93,326,89,325,86,323,84,321,82,320,78,316,74,316,68,315,
65,312,58,312,56,312,47,308,43,308,40,306,37,306,35,304,31,303,27,
307,23,306,19,309,21,312,22,314,21,318">
<area alt="Click to know more about France" href ="moreOnFrance.htm" shape ="poly" coords ="77,316,82,320,86,322,88,323,91,325,95,324,102,327,105,330,112,331,
113,325,117,323,120,320,123,319,127,321,131,326,138,326,139,326,143,
323,146,319,148,318,149,316,145,315,144,312,144,308,141,304,145,
302,145,299,145,296,143,291,141,291,140,292,138,294,139,291,140,288,
141,285,144,282,145,280,147,280,149,276,149,272,150,268,153,265,153,
264,149,263,146,261,141,258,136,258,132,254,128,252,127,251,120,251,
121,246,122,245,119,243,119,241,117,240,115,240,112,241,111,247,109,
250,105,251,101,254,100,256,97,255,91,253,90,251,88,252,88,254,88,258,
85,260,80,259,78,257,74,255,72,255,71,255,69,258,69,263,67,266,72,267,
75,271,79,272,82,276,84,286,85,293,85,300,82,308,79,313,78,316">
</map>
</td>
</tr>
</tbody>
</table>
</body>
</html>
This web page has a table made up of one row with two table cells. The image is in the second cell.
Type this code in a text editor and save it as an HTML file in the directory containing the image. Open it in a browser. Hover your mouse pointer over the maps of Portugal, Spain, and France. The mouse pointer becomes a hand over these regions. They have become clickable.
Next: Caution, Animation, Conclusion >>
More HTML Articles
More By Chrysanthus Forcha
