Another Look at Animation of Geographical Map Regions - Code continued
(Page 4 of 5 )
//toggle the toggle variable
switch(toggleVarS)
{
case 1:
toggleVarS = 0;
break;
case 0:
toggleVarS = 1;
break;
}
TS = setTimeout("togglingSpain()",500);
}
function startTogglingSpain()
{
mouseHasBeenOverOnceS = mouseHasBeenOverOnceS + 1;
if (mouseHasBeenOverOnceS == 1)
{
togglingSpain()
}
}
var toggleVarP = 1; //for toggling the initial image and that of Portugal
var mouseHasBeenOverOnceP = 0; //to indicate that mouse pointer has just come over the region of Portugal
function togglingPortugal()
{
clearTimeout(TF)
clearTimeout(TS)
toggleVarF = 1;
toggleVarS = 1;
mouseHasBeenOverOnceF = 0;
mouseHasBeenOverOnceS = 0;
switch(toggleVarP)
{
case 1: //the initial image has the highest z-index
document.getElementById("initial").style.zIndex = 1;
document.getElementById('Portugal').style.zIndex = 2;
document.getElementById('Spain').style.zIndex = 1;
document.getElementById('France').style.zIndex = 1;
break;
case 0: //the image for Portugal 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(toggleVarP)
{
case 1:
toggleVarP = 0;
break;
case 0:
toggleVarP = 1;
break;
}
TP = setTimeout("togglingPortugal()",500);
}
function startTogglingPortugal()
{
mouseHasBeenOverOnceP = mouseHasBeenOverOnceP + 1;
if (mouseHasBeenOverOnceP == 1)
{
togglingPortugal()
}
}
function resetAll()
{
clearTimeout(TF)
clearTimeout(TS)
clearTimeout(TP)
toggleVarF = 1;
toggleVarS = 1;
toggleVarP = 1;
mouseHasBeenOverOnceF = 0;
mouseHasBeenOverOnceS = 0;
mouseHasBeenOverOnceP = 0;
clearTimeout(TF)
clearTimeout(TS)
clearTimeout(TS)
//reset the images
document.getElementById("initial").style.zIndex = 2;
document.getElementById('Portugal').style.zIndex = 1;
document.getElementById('Spain').style.zIndex = 1;
document.getElementById('France').style.zIndex = 1;
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="100">
</td>
<td id="forMap">
<img src="Portugal.jpg" usemap ="#MP" id="Portugal">
<map id="MP">
Next: More Code >>
More HTML Articles
More By Chrysanthus Forcha
