Animation of Geographical Map Regions - Changing the Look of a Region Onmouseover
(Page 2 of 4 )
Here I describe an example for the first case. I use the following image of Western Europe:
Fig.1. Initial Image of Western Europe
When the web page is loaded, if you bring the mouse pointer over an image region, a JavaScript function is called to pass the name of the region as an argument. The function will then give the image whose color and text for the region is different the highest z-index value; it will give the image that was foremost a lower z-index value. This will send the initial foremost image behind and bring the targeted one foremost. So it will appear as if the color and text of the image region has changed.
This is what happens in this example: when the mouse pointer is over the region of Portugal, the region of Portugal becomes blue with the letter P for the word Portugal and with a black border around the region. When the mouse pointer leaves the region of Portugal the initial picture (above) for Portugal reappears. This phenomenon will repeat for the regions of Spain and France.
To achieve this, you need three other images of Western Europe with the same dimensions: one for Portugal, one for Spain, and one for France. The one for Portugal has a blue region for Portugal with the letter P for the word Portugal and with a black border; the one for Spain has a blue region for Spain with the letter S for the word Spain and with a black border; the one for France has a blue region for France with the letter F for the word France and with a black border.
The three images are as follows:
Fig.2. Image for Portugal
Fig.3. Image for Spain
Fig.4. Image for France
I have included these image files with this article, so that you can try the codes yourself.
When the web page first loads, the initial image is that of fig.1. This image is given an initial z-index value of 2. The other three images are each given a starting z-index value of 1. The BODY element is given a z-index value of 0.
Each of the above 4 images is an image-map in the HTML code. For each image-map the regions of Portugal, Spain, and France are made clickable. Each of these regions takes the shape of an irregular polygon. In one of my previous articles, I showed you how to obtain the corresponding coordinates. The following page has the complete code; the explanation for the code is given below it.
Next: Code >>
More HTML Articles
More By Chrysanthus Forcha
