Home arrow HTML arrow Another Look at Animation of Geographical Map Regions

Another Look at Animation of Geographical Map Regions

We finished the last article with unanswered questions about the onmouseover and onmouseout events for a blinking map region. When does the event actually occur? And what event specifically is occurring? We will answer these questions and more in this article, so join us for the exciting conclusion.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
June 23, 2008
  1. · Another Look at Animation of Geographical Map Regions
  2. · How to Stop the Blinking
  3. · Complete Code
  4. · Code continued
  5. · More Code

print this article

Another Look at Animation of Geographical Map Regions
(Page 1 of 5 )

This is the way some browsers, including mine, behave: the onmouseover event occurs at the first instant the mouse pointer comes over an element. As long as the mouse pointer is over the element, the onmouseover event will be recurring. Now, if the onmouseover event recurs while the pointer is over the element, it means that the onmouseout event must have occurred for the element as well. As you can see this project is delicate; that is why I have to be very explicit below.

The example discussed in the last article was simple, so no problem was noticed. In this example, the interpretation of the onmouseover and onmouseout event poses a problem. So, we approach this example differently from the way we approached the previous example. We shall only have the onmouseover event in our code; we shall not have the onmouseout event. There will be a fourth image-map region for each of our 4 images. The image regions of interest are those for Portugal, Spain, and France. The fourth image region is the rest of the image that does not have Portugal, Spain, or France. The question here is: how do we get such an image area?

A clickable region, as we know, is an enclosed region. For our two examples, it is a polygon. The gray portion of the following image shows how I made a polygon out of the fourth region.

Fig.5. Enclosed Polygon of the fourth Region

Note the white gap in the image near Portugal. With this white gap the gray portion of the image forms an enclosed polygon. When you take your mouse pointer away from Portugal, Spain, and France, it must first find itself on this gray region before it can be out of the image entirely. The chances are small that it will it find itself on the white gap before it leaves the image.

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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials