HTML and CSS Reference
In-Depth Information
paths[i].addEventListener("mouseover", hoverState, true);
paths[i].addEventListener("mouseout", unhoverState, true);
var path=document.getElementById("VA");
path.setAttributeNS(null, "fill", "teal");
In Internet Explorer, the event object is not passed to the event handler. Instead, it is made available
through the global window.event property. The event handlers can be coded to work with either model by setting
the event variable like this: var event = e || window.event so it will use the object passed in, if available, and if
not, it will use the global window.event object. For this to work, however, you must register the event handlers by
using the addEventListener() method. You cannot simply set the onmouseover attribute.
Remove the path:hover style rule like this:
opacity: .5;
Press F5 to start the application and go to the map page. As you move the mouse
around, the states should highlight just like they did with the path:hover style.
Adding Animation
A typical application of a map like this will allow the user to select a region and then something will happen
as a result of that selection. The page would display some information based on the item that was selected. To
demonstrate that, you'll add some animation when the user clicks a state. This will be using 3D transforms that
are not supported by IE9 so I'll be using Chrome for this demonstration.
The CSS animation that I showed you in Chapter 4 does not work on SVG elements. Instead you'll implement the
animation using JavaScript. When a state is selected, you'll first make a copy of the selected element. Then you'll
use a timer to gradually change its rotation angle. You need to make a copy so that as the image rotates around it
doesn't leave a hole in the map. Also, the new element will be on top of all the others so you don't have to worry
about it being hidden by the other elements.
Once the copy of the element has completed its animation, you'll remove it from the document. Then you'll
display an alert showing the state code and state name of the path that was selected.
eXerCISe 9-9. aDDING aNIMatION
because this uses a 3D transform, you'll need to set some of the transform
properties on the path elements. Add the following rule to the style element:
Search WWH ::

Custom Search