The JavaScript Source: CSS : Colorful Object onMouseOver

Browse Doc JS's Tips!

Promotions

Free Announcements

General

This script makes it easy to highlight different areas of your page. The colors are chosen at random. Move your mouse over the areas below.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

You can use this script for many objects as table:

Notes

Created by: Thai Cao Phong
Web Site: http://www.JavaScriptBank.com
Posted: October 31, 2005

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: colorfulObjectOnmouseover.js

var ColorCode=new Array("e0f1ee","d6efff","646560","ffffcc","66ccff", "99ffcc","c0c0c0","669999","999966");
function ParaOver(CaoPhong) {
  CaoPhong.style.backgroundColor=ColorCode[Math.round(Math.random()*10)];
}
function ParaOut(CaoPhong) {
  CaoPhong.style.backgroundColor="transparent";
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="colorfulObjectOnmouseover.js"></script>

Body

Paste this code into the BODY section of your HTML document


<p onmouseover=ParaOver(this) onmouseout=ParaOut(this)>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p onmouseover=ParaOver(this) onmouseout=ParaOut(this)>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<br>
<p>You can use this
script for many objects as table:</p>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1" width="100%">
  <tr>
    <td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" width="50%"> </td>
    <td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" width="50%"> </td>
  </tr>
  <tr>
    <td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)" width="50%"> </td>
    <td onmouseover="ParaOver(this)" onmouseout="ParaOut(this)"> </td>
  </tr>
</table>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

3. From: RandomInsano
Returning colours back to normal
09/11/2007 15:38:18

1. From: Adam
02/17/2007 00:08:14

2. From: Lee (Admin)
05/15/2007 16:06:04

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

3. From: RandomInsanoReturning colours back to normal09/11/2007 15:38:18

1. From: Adam02/17/2007 00:08:14

2. From: Lee (Admin)05/15/2007 16:06:04

3. From: RandomInsano
Returning colours back to normal
09/11/2007 15:38:18

1. From: Adam
02/17/2007 00:08:14

2. From: Lee (Admin)
05/15/2007 16:06:04