Animation of Geographical Map Regions
(Page 1 of 4 )
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.
Method
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.
Next: Changing the Look of a Region Onmouseover >>
More HTML Articles
More By Chrysanthus Forcha
