Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About BTH User Agreement Privacy Site Map Contact Advertise Here News Feeds

HTML5 Solutions: Essential Techniques for HTML5 Developers

HTML5 brings the biggest changes to HTML in years. Web designers now have new techniques, from displaying video and audio natively in HTML, to creating realtime graphics on a web page without a plugin.

This book provides a collection of solutions to all of the most common HTML5 problems. Every solution contains sample code that is production-ready and can be applied to any project.

Click Here

Interactively Set Webpage Colors

By Stephen Bucaro

The document object encompasses everything inside the browser window. The document object's fgColor, bgColor, linkColor, alinkColor, and vlinkColor properties can be used to set colors in a webpage interactively.

The latest browsers treat html elements on a webpage as nodes in a hierarchical tree with the document object as the root node. In that case, you would expect the BODY element to be a child node of the document object and all the html elements in the webpage to belong to the BODY element. In older browsers the document object directly controls the properties of elements within the webpage, bypassing the BODY element. In the latest browsers, the fgColor, bgColor, linkColor, alinkColor, and vlinkColor become properties of the BODY element, while still being accessible as properties of the document object.

Below is a list of the document properties and the colors they set.

Property	Color
fgColor	Foreground
bgColor	Background
linkColor	Links
alinkColor	Active Link
vlinkColor	Visited Links

A link is "active" during the period between when you click on it and when the target webpage takes control of the browser window. You may never actually see the alinkColor color.

Below is the code for an example that lets you set these properties interactively.

<html>
<head>

<script language="JavaScript">

function setColor(prop)
{
  var selColor = document.colorForm.colorSelect.value;

  switch(prop)
  {
    case ("fgColor"):
      document.fgColor = selColor;      
      break;
    case ("bgColor"):
      document.bgColor = selColor;
      break;
    case ("linkColor"):
      document.linkColor = selColor;
      break;
    case ("alinkColor"):
      document.alinkColor = selColor;
      break;
    case ("vlinkColor"):
      document.vlinkColor = selColor;
  }
}

</script>

</head>
<body>

<a target="top" href="http://bucarotechelp.com">Bucaro TecHelp</a>

<form name="colorForm">
Select a Color:
<select name="colorSelect">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="white">White</option>
</select>

<br />
Apply to:
<input type="button" value="fgColor" onclick="setColor(this.value)">
<input type="button" value="bgColor" onclick="setColor(this.value)">

<br />

<input type="button" value="linkColor" onclick="setColor(this.value)">
<input type="button" value="alinkColor" onclick="setColor(this.value)">
<input type="button" value="vlinkColor" onclick="setColor(this.value)">
</form>

</body>
</html>

To use the example, select a color in the drop-down list, then click on a button for the property you want to set. That property will immediately be set. Of course you won't be able to see the vlinkColor until you actually click on the link to visit the target webpage (or conversely you wont be able to see the linkColor if the link points to a webpage that you have already visited.

In addition to demonstrating how to set these document properties, this example shows you how to use Java Script to access an html select list in a form and how to use a Java Script switch/case structure.

Web Design Sections

Easy Cascading Style Sheets

Java Script Quick Reference

Easy Java Script Code

Web Design Tools

Coding Issues

FREE Graphics Warehouse

RSS Feed