Another Look at Animation of Geographical Map Regions - Complete Code
(Page 3 of 5 )
This is the complete code:
<html>
<head>
<style type="text/css">
body {position:relative; z-index:0}
table#withMap {}
td#forMap {width:325px;height:420px; vertical-align:top}
img#initial {position:absolute; border:0px; z-index:2}
img#Portugal {position:absolute; border:0px; z-index:1; cursor:pointer}
img#Spain {position:absolute; border:0px; z-index:1; cursor:pointer}
img#France {position:absolute; border:0px; z-index:1; cursor:pointer}
</style>
<script type="text/javascript">
var TF;
var TS;
var TP;
var toggleVarF = 1; //for toggling the initial image and that of France
var mouseHasBeenOverOnceF = 0; //to indicate that mouse pointer has just come over the region of France
function togglingFrance()
{
clearTimeout(TS)
clearTimeout(TP)
toggleVarS = 1;
toggleVarP = 1;
mouseHasBeenOverOnceS = 0;
mouseHasBeenOverOnceP = 0;
switch(toggleVarF)
{
case 1: //the initial image has the highest z-index
document.getElementById("initial").style.zIndex = 1;
document.getElementById('Portugal').style.zIndex = 1;
document.getElementById('Spain').style.zIndex = 1;
document.getElementById('France').style.zIndex = 2;
break;
case 0: //the image for France has the highest z-index
document.getElementById("initial").style.zIndex = 2;
document.getElementById('Portugal').style.zIndex = 1;
document.getElementById('Spain').style.zIndex = 1;
document.getElementById('France').style.zIndex = 1;
break;
}
//toggle the toggle variable
switch(toggleVarF)
{
case 1:
toggleVarF = 0;
break;
case 0:
toggleVarF = 1;
break;
}
TF = setTimeout("togglingFrance()",500);
}
function startTogglingFrance()
{
mouseHasBeenOverOnceF = mouseHasBeenOverOnceF + 1;
if (mouseHasBeenOverOnceF == 1)
{
togglingFrance()
}
}
var toggleVarS = 1; //for toggling the initial image and that of Spain
var mouseHasBeenOverOnceS = 0; //to indicate that mouse pointer has just come over the region of Spain
function togglingSpain()
{
clearTimeout(TF)
clearTimeout(TP)
toggleVarF = 1;
toggleVarP = 1;
mouseHasBeenOverOnceF = 0;
mouseHasBeenOverOnceP = 0;
switch(toggleVarS)
{
case 1: //the initial image has the highest z-index
document.getElementById("initial").style.zIndex = 1;
document.getElementById('Portugal').style.zIndex = 1;
document.getElementById('Spain').style.zIndex = 2;
document.getElementById('France').style.zIndex = 1;
break;
case 0: //the image for Spain has the highest z-index
document.getElementById("initial").style.zIndex = 2;
document.getElementById('Portugal').style.zIndex = 1;
document.getElementById('Spain').style.zIndex = 1;
document.getElementById('France').style.zIndex = 1;
break;
}
Next: Code continued >>
More HTML Articles
More By Chrysanthus Forcha
