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)"/>
</g>
<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)"/>
</g>
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.
eXerCISe 9-8. aDJUStING StYLeS USING JaVaSCrIpt
1.
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");
}
</script>
2.
In the
body
element add the
onload
attribute using the code shown in bold:
<body
onload="adjustStates()"
>
3.
In the
style
element, remove the default khaki fill like this:
