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.
Animation of Geographical Map Regions - Blinking Region Onmouseover (Page 4 of 4 )
Here I describe an example or project for the second case. In this example, the above four images, each with the same image regions, are used. However, the phenomenon here is that when the mouse pointer is over a region on the initial image, that region should blink. You should see the region in blue with the letter of the word for the country and a black border, then you should see the initial presentation of the region, then the blue presentation again, then the initial presentation, and so on. This toggling takes place at regular intervals.
This project is delicate, so I will be as explicit as possible. Before I carry on I will talk about the onmouseover and the onmouseout events and their associated problems with browsers.
The HTML Specification states: "The onmouseover event occurs when the pointing device is moved onto an element." You have to be careful with this statement. For example, does this mean that the event occurs at the first instant the mouse pointer comes onto the element, does the event refer to the state (time) when the mouse pointer is over the element, or does the event occur at the first instant the mouse pointer comes over the element and only recur when the mouse pointer leaves the element and comes over it again?
For the onmouseout event, the HTML Specification states: "The onmouseout event occurs when the pointing device is moved away from an element." You can ask similar questions to the ones above for the onmouseout event. However, you will not find answers to these questions until the next article. So stay tuned.
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
HTML 
Another Look at Animation of Geographical Map Regions
