Animation of Geographical Map Regions (Page 1 of 4 )
You achieve this by using layers of images with the same dimensions. This means that there are one or more images with the same dimensions behind the image that is seen immediately when the web page is loaded. Each image behind the initial image has a region where the color and text are different from those of the corresponding region in the initial image. When you bring a mouse pointer over a region on the initial image, it brings the image whose corresponding region is different to the front. An image is said to be "brought to front" when it comes in front of the initial image.
You put the images in layers using CSS. Put one of the images where you want according to the Normal Flow. In CSS, give the image a position property with the value, "absolute." Do not give the image the left and top property in CSS. With these conditions, the image will maintain its position, but will not occupy space in the normal flow, meaning the left-top corner of the image will maintain its x,y window client coordinates in the normal flow, but the image will appear either behind or in front of the elements that are of the normal flow in that area.
In your HTML document, put the other images in the normal flow next to the first image. Give each the same CSS properties you did for the first one. In this way, the images will appear in one area. The one that came first in the HTML document will appear foremost. The one that came next will be behind; the one that came third will be behind the second; and so on.
The CSS z-index property is used to make one element appear in front of another. The one with the highest z-index value becomes the foremost element independent of the order in the HTML document. The one next in z-index value appears behind it independent of the order in the HTML document; the one with the next highest value appears third; and so on. The z-index value is an integer.