Jump to content
xisto Community
Sign in to follow this  

Simple Scripts In Html And Javascript Things like BackgroundColorChanger and so

Recommended Posts

like in the topic, here is a description how to change the Backgroundcolor "On The Fly", by klicking on a button or radio-box

first, we ned the html-and body-tags, create a new html-file on your desktop and write the following:


<script language = "JAVASCRIPT">



browser interpretation:
html - tag means "hey, browser, here comes HTML"
in the body-tag you define the looking of your site. you can add things like "bgcolor" for the background, "text" for the textcolor and link / alink / hlink / vlink to define the linkcolor
(<body bgcolor='#000000' text='#FFA500' link='#FFA500' vlink='#FFA500'>)

the scripttag is the tag, we'll need now (sorry, but my english isn't very well)

modify your file and type in the SCRIPT - TAG:
function bgcsel(color){document.bgColor=color;}
this is the function, witch will change the bgcolor. now we'll type the rest, to let the function go:
write between the html tags
<input type = radio onClick = java script:bgcsel('#FFA500')>switch to Orange<input type = radio onClick = java script:bgcsel('#FF0000')>switch to Red<input type = radio onClick = java script:bgcsel('#000000')>switch to Black

now, when you look at the site andd klick on a radiobutton, the bgcolor will change

BTW: try to replace the "onClick" by "onMouseover"

the final file looks like this:
<html><body><script language = "JAVASCRIPT">function bgcsel(color){document.bgColor=color;}</script></body></html>

simple color changer :lol:

Share this post

Link to post
Share on other sites

This is a nice tutorial including some simple html and javascript scripts. As said in one of the above posts, these scripts certainly help the web designers add more dynamic content to their websites.It is important to note though, that internet browsers allow you to disable javascript code. If your users have javascript disabled, they will not be able to see the dynamic features which you intend for them to be able to view. You need to be aware of this and ensure that there isn't too great a dependency for using Javascript.Nice code though, will certainly help those who are looking for codes similar to the ones you have posted in this tutorial. Thanks for sharing :lol:

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.