|
How to modify a Web Page Background Colour using only a Mouse Click
The background color of a web page is a question of taste, like most style characteristics. If you are looking for a way to make the background color of your pages flexible just follow the instructions below.
In particular if your pages are very colorful, you may want to let the user select some of the background colors, especially if you are using advanced printing techniques. Fortunately a base flexibility is relatively easy to achive with less than 10 lines of Javascript code. The following needs to go in the <head> section
<script language = "Javascript">
function pageBackground(bkgColor) {
document.bgColor=bkgColor
}
</script>
In order to activate the color change there are many ways of providing your users with an interface to the above functionality. Here we go through the simple route of using a link:
<a href="#"
onClick=pageBackground('yellow')>Yellow</a><br / >
<a href="#"
onClick=pageBackground('lightblue')>Blue</a><br / >
Below you can observe them embedded into the current page for you to try out :
Yellow
Blue
The anchor (#) makes sure that no new page is opened by the link. As an exercise, you might want to provide an interface so that the background color changes on modifying a pop-up menu with all kinds of different background color options.
previous tip | next tip
|
