Tuesday, May 10, 2005
Blog Entry #8
Roll your mouse over the colors of the color series below:
Red Orange Yellow Green Blue Indigo Violet
(Those of you who are 'scientifically inclined' will recognize that these colors in the form of light approximately make up the visible region of the electromagnetic spectrum, which ranges from lowest energy (longest wavelength) red light through the intermediate colors of the series to highest energy (shortest wavelength) violet light. Acronym fans, remember: ROY G BIV.)
To 'statically' set a background color for a document element, we would put the attribute:
style = "background-color: colorinfo"
("colorinfo" is the desired color as a word description or hex code)
or, more simply:
style = "background: colorinfo"
into the relevant HTML tag, e.g., <p>, <span>, <div>, etc. (At HTML Goodies, discussion of the <span> tag appears here, whereas the <div> tag crops up in the "So, You Want Positioning, Huh?" tutorial.)
For example, <span style = "background-color: lightseagreen">The Pacific Ocean</span> gives: The Pacific Ocean
onmouseover = "this.style.backgroundColor = 'colorinfo';"
or, more simply:
onmouseover = "style.background = 'colorinfo';"
In these statements, "style" is simultaneously serving as (a) an object, with a backgroundColor (background) property whose value is to be 'colorinfo', and (b) a property of the "this" element.
So, getting back to the demo at the top of the page, the code for dynamically changing the background (and 'foreground') color of "Red" is:
<span onmouseover="style.background='red'; style.color='white';">Red</span>
Not so tough, eh?
The getElementById( ) method
What is the capital of Nicaragua?
(A) San Salvador
(D) San José
(again, the "Color" of "backgroundColor" can be dropped)
I trust that you can write out the complete code for all of this.
Blogger background colors, revisited
This blog makes use of the (old-school, no-longer-available) "Bluebird" Blogger template.
Click here to view the source code of my template. Click here to hide the code.
In the template, a post is contained in a <$BlogItemBody$> template tag that sits in a division element whose <div> tag holds a class="Post" attribute; in turn, the <div class="Post"> division is part of a larger division element whose <div> tag holds an id="main" attribute. To set a new background color - say, violet - for the <div id="main"> division, we can straightforwardly write:
<span onclick="document.getElementById('main').style.background='violet';">Click on this sentence to change the post background color.</span>
Try it below:
Click on this sentence to change the post background color.
Similarly, the "About Me" section of the blog that occupies the upper-right-hand corner constitutes a division whose <div> tag holds an id="menu" attribute. To set a new background color - say, gold - for the <div id="menu"> division, we could write:
<span onclick="document.getElementById('menu').style.background='gold';">Click on this sentence to change the background color of the "About Me" section.</span>
Try it below:
Click on this sentence to change the background color of the "About Me" section.
Let's get back now to the document.bgColor command, which I discussed but did not demonstrate in my last blog entry. The background color of the document is set by the body selector that kicks off the inline style block at the top of the template source; as you can see, the body's background-color property has the value "#C3CFE5", corresponding to a pale blue, which colors the stripes running up and down the sides of the template. In trying to change the color of the background side stripes, the problem here is that the document.bgColor command will not override the body selector information. What to do? The solution, it turns out, is quite simple:
(1) Remove "background-color:#C3CFE5" from the body selector; in its stead, insert a bgcolor="#C3CFE5" attribute in the <body> tag.
(2) NOW use a document.bgColor command where desired to change the document background color. To change the side stripes to red, for example, we could write:
<span onmouseover="document.bgColor='red';">Move your mouse over this sentence to change the side-stripe color.</span>
Try it below:
Move your mouse over this sentence to change the side-stripe color.
Alternatively, we could insert an id attribute - say, id="sidestripes" - in the <body> tag and then use an onmouseover="document.getElementById('sidestripes').style.background='red';" command statement in the <span> tag.