¡De Colores!
I know this might not happen very often, but, suppose you wanted the viewers of your website to be able to choose the colours used in different elements of your pages. How would you go about doing it? What if you wanted to change the background colour of your web page when the viewer performs a certain action (such as a click or a mouse-over), revealing some hidden text? It's not hard to do. Lemme show you.
First of all, you have to be familiar with cascading stylesheets, or CSS. (If you just said, "Huh?", go see my article on it.) Secondly, you might want to know a smidgen of JavaScript, but it's not absolutely necessary. You can read my article on JavaScript image swapping or get a quick overview from the good folks at Webmonkey. In particular, you'll want to know how JavaScript functions work, but I'll try to explain as best as possible.
For our trial run, just make a generic web page with a good bit of text. I used the lyrics to one of my favourite songs. Set it up with some default styles, like so:
<html>
<head>
<title>¡De colores!</title>
<style>
body {background: black; font-family: monospace; font-size: 15pt; color: white}
a:link {background: black; color: white}
a:visited {background: black; color: white}
a:active {background: black; color: white}
a:hover {text-decoration: none}
</style>
</head>
<body>
<p>blah, blah blah....
...
.... yadda-yadda blah.</p>
</body>
</html>
Next, you'll want to define some JavaScript functions that tell the browser to change the colour. Insert this somewhere in the <head> section of your page:
<script language=JavaScript>
<!-- //hide from javascript challenged browsers
//function that changes the background colour
function backChange(espalda)
{
document.body.style.background = espalda
}
//function that changes the text colour
function txtChange(texto)
{
document.body.style.color = texto
}
//-->
</script>
Alright, we've got these functions defined. What exactly are we supposed to do with them? For starters, when you use them in your web page, you have to plug in a colour for "espalda" or "texto", like:
backChange('red');
txtChange('#0FF');
backChange('#05FA2C');
Then, you have to tell the browser to change the colours upon certain events:
<a href="javascript:backChange('lime');">This link will change the background colour to lime green when you click on it</a>
<a href="#" onMouseOver="txtChange('#700');">This link will change the text colour to dark red when you move the mouse over it</a>
<a href="#" onDblClick="txtChange('#57C85A');">This link will change the text to some god-awful colour when you double click on it</a>
And that's it! I know I kinda whirlwinded thru it, but if you look at this page and its code, you'll get a better feel for how to implement what you've learned in your own web site. Some tips on implementation: make sure you type the function name EXACTLY how you typed it in the <script> part throughout your document, make sure you surround the colour names or codes you plug in the functions in SINGLE QUOTES, and make sure you ALWAYS follow up a function with a semi-colon (;). As always, if you have any questions or problems e-mail me.
Go To Page: 1 2
Articles in this Topic Discussions in this Topic
Latest Articles