HTML and CSS Reference
In-Depth Information
return;
}
// Change the image rotation
animate.style.webkitTransform="rotateY(" +Math.round(angle) + "deg)";
}
The selectState() function gets the state code and state name from the selected path element. It then gets
the path element and uses its cloneNode() method to make a copy of it. Because the mouse is currently over
the selected path, it will have the opacity set to 50%. So this code changes the opacity of the copy to 100%. It also
sets the stroke width to give this element a wider border. The copy is then added to the document and a timer is
started to cause the animation.
Every 10 milliseconds, the animateState() function is called, which increments the angle and redraws the
image. If the rotation has reached 360 degrees, this method cancels the timer and removes the copy of the path
element. It also raises an alert to display the state code and state name.
3.
Add another event handler by adding the code shown in bold to the adjustStates()
function. This will call the selectState() method when the user clicks a path
element.
function adjustStates() {
var paths=document.getElementsByTagName("path");
for (var i=0; i<paths.length; i++) {
paths[i].setAttributeNS(null, "fill", "khaki");
paths[i].addEventListener("mouseover", hoverState, true);
paths[i].addEventListener("mouseout", unhoverState, true);
paths[i].addEventListener("click", selectState, true);
}
var path=document.getElementById("VA");
path.setAttributeNS(null, "fill", "teal");
}
4.
Change the debug browser to Chrome. Press F5 to start the application and go to
the map page. Click on a state and you should see it fly off the page as shown in
Figure 9-18 .
 
Search WWH ::




Custom Search