This article covers HTML images. You need basic knowledge of HTML, CSS, and JavaScript to understand it. In one of my previous articles, I explained how you can make the regions of a geographical image clickable. In this article, I show how you can add animation to these types of images. I will consider two cases in this article. In the first case, the color and text on a region changes when the mouse pointer is over it. In the second case, the region blinks or flickers between its initial presentation and a following presentation.
<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">
<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.
HTML 
Another Look at Animation of Geographical Map Regions
