script, so that each time the user hovers the mouse, the element is restored
to its original status (see Chapter 13 for details about toggling behavior). Or
try adding a timer (see the section “Timing Things Right” later in this chap-
ter) to control the speed or timing of a style change.
Changing the rules ............................................................................
In this next example, you modify the stylearea itself. For example, say you
have a selector and style definition like this:
p {font-size: 8px; color: pink; }
When the page loads, your paragraphs are in tiny pink text. What if you want
to allow the user to change this style rule? This next line of code changes the
prule when a user’s mouse pointer moves over this element so that the text
changes to blue and increases to a size of 18 pixels:
<h1 onmouseover=”newrule(‘p’,’font-size: 18px; color:
blue’)”>Hover here to drop
To accomplish this, first you give a styleelement an idof its own (yes, you
can give the styleelement an id). In your script, you use this idto specify
which styleelement you’re talking about (a page can have more than one
styleelement, so this is required):
<style id=”thestyles”>
Here’s the complete, working example for you to experiment with:
<html>
<head>
<script>
function newrule(selector,props) {
document.styleSheets.MyStyles.addRule(selector,props)
}
</script>
<style id=”MyStyles”>
h1 {font-size: 24pt}
288 Part IV: Advanced CSS Techniques
