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.
Caution
7.
Remove the
path:hover
style rule like this:
/*path:hover
{
opacity: .5;
}*/
8.
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
1.
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:
