Another Look at Animation of Geographical Map Regions - How to Stop the Blinking
(Page 2 of 5 )
We need to stop the blinking as the mouse pointer goes out of the region of Portugal, Spain, or France. Here's how: this fourth region forms an AREA element for each of the image maps. As soon as the mouse pointer is over this fourth region, the fourth AREA element triggers an onmouseover event. A function is called that stops any blinking that was taking place for the region of Portugal, Spain, or France.
As you can see, we have avoided the use of the onmouseout event. We have avoided the "intermittent" problems that it brings with the browser. We have simulated it with the presence of the fourth region. We still have another problem to handle, though: the recurring of the onmouseover event while the mouse pointer remains over an element.
As long as the mouse pointer is over Portugal, the onmouseover event will be recurring, but we only have to respect it the first time it occurs. So when the mouse pointer goes over Portugal, the onmouseover event of the AREA element of Portugal is triggered. It calls a function with the name "startTogglingPortugal()." This function has two purposes: it calls the "togglingPortugal()" function, which actually toggles the initial image with the image that has a blue color for Portugal. The other purpose of the "startTogglingPortugal()" function is to guard the program against the recurrences of the onmouseover event while the mouse pointer is over Portugal, meaning it has to make the program ignore any subsequent recurrence of the onmouseover event.
It does this by using the "mouseHasBeenOverOnceP" global variable. This is initialized at the global level to zero. When the onmouseover event occurs the first time, the value of this variable is increased to 1; the second time the onmouseover event occurs, the value of the variable is increased to 2; the third time, the value is increased to 3, and so on. The "startTogglingPortugal()" function is written so that it calls the "togglingPortugal()" function only when the "mouseHasBeenOverOnceP" is 1. This way, the recurrences of the mouse event are ignored.
So the onmouseover event has two corresponding functions, "startTogglingPortugal()" and "togglingPortugal()." Both Spain and France have similar corresponding functions.
The "togglingPortugal()" function uses a DOM timing function. The syntax for the JavaScript timing function is:
var t = setTimeout("javascript statement",milliseconds)
The last parameter (milliseconds) is time in milliseconds. The first parameter is a statement, or call, to a function that is executed after the time indicated in the last parameter (milliseconds) has elapsed. If you want the statement to be repeatedly executed after a specified time interval, you have to put the "setTimeout" function in a while loop. The "setTimeout" function returns a value (t). You can cancel (nullify) the "setTimeout" function using the following function:
clearTimeout(t)
Here, t is the return value of the "setTimeout" function. This statement can be executed even if the "setTimeout" function has not been called. If you cancel the "setTimeout" function while the While loop is on, then you still have to stop the while loop. However, I use a different technique. Consider the following function:
function togglingPortugal()
{
............
............
............
t = setTimeout("togglingPortugal()",500);
}
The "setTimeout" function is inside a function called "togglingPortugal()." The first parameter in the "setTimeout" function is a call to "togglingPortugal()." So, "togglingPortugal()" calls itself (in the "setTimeout" function). With this, you automatically have a While loop centered at the "setTimeout" function. So, to stop the timing effect at the same time as the while loop, all you need to do is execute the following statement:
clearTimeout(t)
Next: Complete Code >>
More HTML Articles
More By Chrysanthus Forcha
