- Forums
- Javascipt
- Changing Background Color With Javascript Tutorial For Beginners Learn Show
this page will show you how to change the background color on a web page by simply using javascript code, this tutorial is for people who are starting to learn about javascript [783], Last Updated: Sat May 18, 2024
webmaster
Tue Dec 19, 2006
0 Comments
1961 Visits
did you know that you can change background color of web page dynamically with javascript. today i will show you how javascript is used to change colors on the fly. this is a cool feature if you are starting your website, it a great way to learn how to do programming. this tutorial focuese on the idea to share our learning and passing it on to people who want to learn the easy way. we will show you how you can change background colors with javascript.
to start, open your text editor. you can use notepad in windows. so open notepad and copy and past the following code into a blank notepad document:
CODE:
<HTML>
<TITLE>How To Change Background Colors With Javasript Sample Code Script</TITLE>
<HEAD>
</HEAD>
<style type="text/css">
<!--
.style2 {color: #0066FF}
.style3 {
color: #009933;
font-weight: bold;
}
.style5 {color: #0066FF; font-weight: bold; }
-->
</style>
<BODY>
<p><strong>How To Change Background Colors With Javasript Sample Code Script
</strong> </p>
<p>Choose the Background color you would like to change to: <br />
<SELECT onChange=
"document.bgColor=this.options[this.selectedIndex].value">
<OPTION VALUE="40E0D0"> Torquoise
<OPTION VALUE="2E8B57"> Sea Green
<OPTION VALUE="87CEEB"> Sky Blue
<OPTION VALUE="F4A460"> Sandy Brown
<OPTION VALUE="FFF0F5"> Lavender Blush
<OPTION VALUE="FF1493"> Deep Pink
<OPTION VALUE="FFFFFF" SELECTED> White
</SELECT>
</p>
<br />
<span class="style3">NOTE</span>: you must have javascript enabled in your browser for this to work, if you want to know how to enable javascript in your browser, <a href="http://www.wallpaperama.com/forums/show-me-how-to-enable-javascript-in-firefox-browser-t43.html">CLICK HERE </a><br /><br />
<div align="center">Turotial by <a href="http://www.wallpaperama.com">Wallpaperama.com</a></div>
<hr size="2" noshade>
<p>This Script is provided by <span class="style5">Wallpaperama.com</span> - Support us by telling your friends about wallpaperama and help contribut to the open source by adding your knowledge of PHP, Linux, Mysql and more to others, just like this script.</p>
<p>Thank You</p>
<p class="style3">Wallpaperama Team</p>
<p><a href="http://www.wallpaperama.com/forums"><< Go Back</a> </p>
<p align="center">PHP Hosting by <a href="http://www.webune.com">Webune.com</a> </p>
<p>
</BODY>
</HTML>
once you have copy and pasted the above code, save the file as javascript-colors.html and upload to your website.
if can't upload to your website or you don't have a website, you can start by visiting our friends at www.webune.com and start your own website.
this post is sponsed by www.webune.com
IF you don't have a website, our friends at www.webune.com have provided us with server space to show you how this javascript would work.
http://www.wallpaperama.com/tutorials/javascript-colors.html SEE DEMO