Home arrow HTML arrow Animation of Geographical Map Regions

Animation of Geographical Map Regions

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.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 8
June 16, 2008
  1. · Animation of Geographical Map Regions
  2. · Changing the Look of a Region Onmouseover
  3. · Code
  4. · Blinking Region Onmouseover

print this article

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.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials