Change background color onmouseover with Javascript
You can change background color of this div just bringing your mouse over colors.
Code of Javascript/HTML:
<script language="javascript">
function change_background_color(c){
document.getElementById('div2change').style.backgroundColor= '#'+c;
}
</script>
<div id="div2change" style="background-color: #cde; padding: 10px ; text-align: center;">
You can change background color of this div just bringing your mouse over colors.
<a style="background-color: #0f3;" class="cc" onMouseOver="change_background_color('00ff33'); ">00ff33</a>
<a style="background-color: #6cf;" class="cc" onMouseOver="change_background_color('66ccff'); ">66ccff</a>
<a style="background-color: #ff9;" class="cc" onMouseOver="change_background_color('ffff99'); ">ffff99</a>
<a style="background-color: #0fc;" class="cc" onMouseOver="change_background_color('00ffcc'); ">00ffcc</a>
</div>
Bookmark/Search this post with
Similar entries
- Check password safety with JavaScript while typing
- CSS Text effects for MSIE
- Common HTML / Web colors
- Redirect webpages with HTML, PHP, .htaccess, Java+Script, CGI-Perl, ASP.NET and ColdFusion
- Web2 Style CSS Dynamic Menu with Arrows and Background-Images
- Mouseover images with CSS
- Web 2.0 Style two Side Background, Dark to Light Effect
- Preload images with JavaScript or CSS
- Pure CSS Mouseover Menu without Javascript
- High tech design/ layout rules
- Web2 style secure & flexible free php contact form with easy setup
- DropDown / Rollover Menu with pure CSS / HTML
- HTML horizontal list elements instead vertical
- CSS vertical text for mozilla-firefox?
- Multiple 2+ Divs next to each other (like table cell)
- Cool Drupal Themes with preview to download directly
- CSS hierarchy and inline style sheets
- Drupal problem with inline style <p style=""> and <br />
- Remove underline from text-links (html-tag a)
- Bing vs. Google: a small comparison
The following Javascript code will help you change the background-color of your web-page automatically and at a time-interval (in milli-seconds) as specified in the code.
/* Method To Generate Random Numbers Between "0-255" for RGB Color-code Format & Assign To Body-Backgrond-Style */
function bgDisco()
{
var x =Math.round(255*Math.random());
var num1 =getHex(x);
var y =Math.round(255*Math.random());
var num2 =getHex(y);
var z =Math.round(255*Math.random());
var num3 =getHex(z);
document.body.style.background="#"+num1+num2+num3;
setTimeout("bgDisco()",1000);
}
Good example and helped me to let people easily understand something using an open presentation. Gracias!
Post new comment