HTML and CSS Reference
In-Depth Information
<g id="c">
<path id="t" d="M 0,-135 v 135 h 67.5"
transform="rotate(18 0,-135)"/>
<use xlink:href="#t" transform="scale(−1,1)"/>
<use xlink:href="#c" transform="rotate(72)"/>
<use xlink:href="#c" transform="rotate(144)"/>
<use xlink:href="#c" transform="rotate(216)"/>
<use xlink:href="#c" transform="rotate(288)"/>
Notice that the group element, g , is used to define a single path. This is rotated with five different angles to
create a five-pointed star.
Altering Styles with JavaScript
One of the primary uses of this kind of application is to dynamically style each element based on some external
data. For example you might want to highlight states where you have sales locations. Or perhaps you want to set
the colors based on some type of demographics such as population. So far you have used only static styles but
you can just as easily set the styles using JavaScript.
In this example, you will first set the fill attribute on all path elements to khaki using JavaScript. This will
replace the CSS property that sets the default color. This code will then set the fill color of the path element for
Virginia. In a real application you would normally define the style based on external data.
This exercise will also show you how to use JavaScript to respond to the onmouseover and onmouseout events.
You will replace the path:hover rule and accomplish this using these event handlers.
Add the following script element in the head element of the map.cshtml file.
<script type="text/javascript">
function adjustStates() {
var paths=document.getElementsByTagName("path");
for (var i=0; i<paths.length; i++) {
paths[i].setAttributeNS(null, "fill", "khaki");
var path=document.getElementById("VA");
path.setAttributeNS(null, "fill", "teal");
In the body element add the onload attribute using the code shown in bold:
<body onload="adjustStates()" >
In the style element, remove the default khaki fill like this:
Search WWH ::

Custom Search