Animation of Geographical Map Regions - Code
(Page 3 of 4 )
<html>
<head>
<style type="text/css">
body {position:relative; z-index:0}
td#forMap {width:325px;height:420px; vertical-align:top}
img#initial {position:absolute; border:0px; z-index:2}
img#Portugal {position:absolute; border:0px; z-index:1; cursor:pointer}
img#Spain {position:absolute; border:0px; z-index:1; cursor:pointer}
img#France {position:absolute; border:0px; z-index:1; cursor:pointer}
</style>
<script type="text/javascript">
function bringToFront(ID)
{
document.getElementById(ID).style.zIndex = 2;
document.getElementById("initial").style.zIndex = 1;
}
function sendBehind(ID)
{
document.getElementById(ID).style.zIndex = 1;
document.getElementById("initial").style.zIndex = 2;
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="100">
</td>
<td id="forMap">
<img src="Portugal.jpg" usemap ="#MP" id="Portugal">
<map id="MP">
<area onmouseout="sendBehind('Portugal')" href ="moreOnPortugal.htm" alt="Click to know more about tourism in Portugal" 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 onmouseout="sendBehind('Spain')" href ="moreOnSpain.htm" alt="Click to know more about tourism in Spain" 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 onmouseout="sendBehind('France')" href ="moreOnFrance.htm" alt="Click to know more about tourism in France" 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>
<img src="Spain.jpg" usemap ="#MS" id="Spain">
<map id="MS">
<area onmouseout="sendBehind('Portugal')" href ="moreOnPortugal.htm" alt="Click to know more about tourism in Portugal" 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 onmouseout="sendBehind('Spain')" href ="moreOnSpain.htm" alt="Click to know more about tourism in Spain" 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 onmouseout="sendBehind('France')" href ="moreOnFrance.htm" alt="Click to know more about tourism in France" 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>
<img src="France.jpg" usemap ="#MF" id="France">
<map id="MF">
<area onmouseout="sendBehind('Portugal')" href ="moreOnPortugal.htm" alt="Click to know more about tourism in Portugal" 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 onmouseout="sendBehind('Spain')" href ="moreOnSpain.htm" alt="Click to know more about tourism in Spain" 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 onmouseout="sendBehind('France')" href ="moreOnFrance.htm" alt="Click to know more about tourism in France" 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>
<img src="westEuropeMap.jpg" usemap ="#MM" id="initial">
<map id="MM">
<area onmouseover="bringToFront('Portugal')" alt="Click to know more about tourism in Portugal" 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 onmouseover="bringToFront('Spain')" alt="Click to know more about tourism in Spain" 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 onmouseover="bringToFront('France')" alt="Click to know more about tourism in France" 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>
Each clickable region for the initial image (fig.1) is given an onmouseover event. When the event occurs, it calls a function with the name of the country as its argument. This name of the country is the ID of the image where the country has been colored in. The ID for the initial image is "initial." Note that these images are already on the web page, but in layers. So the function can get at them using the "document.getElementById(ID)" method. The function gives the image whose ID is the function's argument, a z-index value of 2 and it gives the initial image a z-index value of 1. Note that all the other images remain at a z-index value of 1.
The region of Portugal, or Spain, or France in each image is made clickable by their image maps. Each clickable region for each of the three images with color is given the onmouseout event. When the event occurs, it calls a function with the name of the country as an argument. This name of the country identifies the image itself. However, this time the function called is different from the one just mentioned above. This function gives the image whose ID is the function's argument, a z-index value of 1 again and it gives the initial image a z-index value of 2. Note that all the other images then remain at a z-index value of 1.
Next: Blinking Region Onmouseover >>
More HTML Articles
More By Chrysanthus Forcha
