HTML and CSS Reference
In-Depth Information
-webkit-perspective: 200px;
-webkit-transform-style: preserve-3d;
Then add the code shown in listing 9-5 to the script element.
Listing 9-5. Adding function to support animation
// Setup some global variables
var timer;
var stateCode;
var stateName;
var animate;
var angle;
function selectState(e) {
var event=e || window.event;
// Get the state code and state name, "id");, "class");
// Get the selected path element and then make a copy of it
var path=document.getElementById(stateCode);
// Set some display properties and add the copy to the document
animate.setAttributeNS(null, "fill-opacity", "1.0");
animate.setAttributeNS(null, "stroke-width", "3");
// Setup a timer to run every 10 msec
timer=setInterval(function () { animateState(); }, 10);
function animateState() {
angle+= 1;
// If we've rotated 360 degress, stop the timer, destroy the copy
// of the element, and show an alert
if (angle>360) {
animate.setAttributeNS(null, "visibility", "hidden");
var old=document.getElementById("map").removeChild(animate);
alert(stateCode +" - "+ stateName);
Search WWH ::

Custom Search