Scalable Vector Graphics - HTML5 with Visual Studio 2012 - page 213

path
{
stroke: black;
/* fill: khaki; */
}

4. Press F5 to start the application and go to the map page. Virginia should no longer

use the default color as shown in Figure 9-17 .

Figure 9-17. Virginia styled with JavaScript

5. Now you'll also use JavaScript to implement the hover style. You can use the

event.target property to get the path element that triggered the event. You can then
determine the state code by accessing its id attribute. Add the following methods to
the existing script element.

function hoverState(e) {
var event=e || window.event;
var state=event.target.getAttributeNS(null, "id");
var path=document.getElementById(state);
path.setAttributeNS(null, "fill-opacity", "0.5");
}

function unhoverState(e) {
var event=e || window.event;
var state=event.target.getAttributeNS(null, "id");
var path=document.getElementById(state);
path.setAttributeNS(null, "fill-opacity", "1.0");
}

6. Then bind the mouseover and mouseout event handlers by adding the code shown

in bold to the adjustStates() function. This uses the addEventListener() method
to bind hoverState() and unhoverState() event handlers to each path element.

function adjustStates() {
var paths=document.getElementsByTagName("path");
for (var i=0; i<paths.length; i++) {
paths[i].setAttributeNS(null, "fill", "khaki");