JavaScript - Changing Table Row Color

I'm a member of a forum the for the Winter season has changed it's CSS a:link color attribute to a more winter themed colour. However I want to revert back to original as I don't particularly like the new colour.

My theory is to create a small JS file, that I can define Opera (my browser) to load when loading the site, which will change the colour of links back to the original colour. I have the colour code HTML I want to change it to.

I've only ever done a small amount of JS coding but from the research I've done it should go something like this,

Code:

document.style.alinkColor = "COLOR"

I got to that via discovering that

Code:

document.style.backgroundColor = "COLOR"

will change the background colour attribute, however it doesn't seem to work. I think my problem lies somewhere in the attribute name, I know the usually with JS CSS Attributes you would make the attribute starting with a lower case letter and the sub-attribute (e.g. the color bit) starting with an upper case.

Anyone able to point me in the right direction?

Hey guys,
I have been trying to get better at my javascript as of late and there is this one particular color fading technique I have found that I am having trouble dissecting.

The following code appears to be how they are making a rollover go from a dark gray to a subtle light gray with a nice fade but I can't exactly tell whats going on from the code. Is it just telling it to add a rgb point in so many seconds?

Any professional help would be greatly appreciated.

Code:

colorInit=
true}b.elem.style[a]="rgb("+Math.max(Math.min(parseInt(b.pos*(b.end[0]-b.start[0])+b.start[0],0),255),0)+","+Math.max(Math.min(parseInt(b.pos*(b.end[1]-b.start[1])+b.start[1],10),255),0)+","+Math.max(Math.min(parseInt(b.pos*(b.end[2]-b.start[2])+b.start[2],0),255),0)+")"}});

hi im trying to make the background color change to white after the iframe is triggered. right now it sits transparent on the page but after the iframe is triggered i want the background to be white. is there a way to do this? i dont know much about java but im assuming this would be something to use java for. Thanks


Code:

<iframe name="result" style="border: 0px solid #000000;"frameborder="0" width='100%' height='590px' src="result1.php" allowtransparency="true"></iframe>

Is it possible to give an anchor tag an id and call it with GetElement?

this is what I have tried:

Code:

<a id="link1" href="test.html">Part 1</a></li>

Code:

document.getElementById("link1").style.color = "blue";

This is my CSS:

Code:

A:link {
 	color:#ffffff;
    	font-size:14pt;
    	font-weight:bold;}

A:visited {
   	color:#ffff00;
    	font-size:14pt;
    	font-weight:bold;}

A:hover {
   	color:#6698ff;
    	font-size:14pt;
    	font-weight:bold;}

A:active {
	color:#c0c0c0;
   	font-size:14pt;
    	font-weight:bold;}

Hi all,

I currently have this javascript that will change the cell to green with one click...

Code:

<script type="text/javascript">
    	function ColorChange(obj){
			obj.style.color='#FFFFFF';
			obj.style.backgroundColor='#66CC33';
			obj.parentNode.style.backgroundColor='#66CC33';
		}
    </script>

echo "<td align=\"center\" bgcolor=\"#EEEEEE\"><a href=\"#\" onclick=\"ColorChange(this)\">$day_num</a></td>";

the problem is that I need around 3 different colors to be possible..

e.g. 1 click turns cell green | 2 turns is red | 3 turns it orange.

I'm not sure how to take this javascript further?

Would someone be kind enough to point me in the right direction?

Many thanks,

Greens85

I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with.

I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this:

Code:

<thead><tr class="Answers">

			<th class='c1 BorderColor' width="25%" class='c1'> &nbsp; </th>
		<th class='c2 BorderColor' class='c2 yAxisBorder' > &nbsp; </th>
		<th class='c3 BorderColor' class='c3 yAxisBorder' > &nbsp; </th>
	
	
										
		<th width="25%" class='Selection BorderColor c4   ' id='header~QID19~1~4' >

			<label>Disagree</label>
		</th>
										
		<th width="25%" class='Selection BorderColor c5   ' id='header~QID19~2~5' >
			<label>Neither agree nor disagree</label>
		</th>
										
		<th width="25%" class='Selection BorderColor c6 last  ' id='header~QID19~3~6' >
			<label>Agree</label>

		</th>
	
	
</tr></thead><tr class='ChoiceRow   '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3'  ></td></tr><tr class='ChoiceRow ReadableAlt  '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3'  ></td></tr><tr class='ChoiceRow  bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3'  ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div>

I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads.

What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered.

I used the following JS code:

Code:

var radioname = [];
var radiolist = [];
var labelspans = [];
var labels = [];
var radios = [];
var count;
var spans = document.getElementsByTagName('span');

function getLabels()
  {
    for (x=0; x<spans.length; x++)
  {
    if (spans[x].className == "LabelWrapper")
    {
      labelspans.push(spans[x]);
    }
  }
    for (y=0; y<labelspans.length; y++)
  {
   labels.push(labelspans[y].firstChild);
   radioname.push(labelspans[y].firstChild.htmlFor);
  }
}
  
function getRadios()
{   
  //will put all radio groups into the "radiolist" array
  for (z=0; z<radioname.length; z++)
   {
     radiolist.push(document.getElementsByName(radioname[z]));
     //will add Event Listener to each radio button, and add each one to the "radios" array
     for (i=0; i<radiolist[z].length; i++)
       {
        chkradio = radiolist[z][i];
        chkradio.setAttribute("count",Number(z));
        chkradio.addEventListener("click", function(){changeLabel()}, false);
        radios.push(chkradio);
       }
  }
}

function changeLabel()
//loops through all the radios to check if they are selected, and changes label color accordingly          
   {
    for (w=0; w<radios.length; w++)   
      {
       if (radios[w].checked)
           {
            a = radios[w].getAttribute("count");
            labels[a].innerHTML = labels[a].innerHTML.fontcolor("green");
           }
       }
    }
getLabels();  
getRadios();

This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster?

Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative?

I am very new to coding, trying to teach myself some javascript. I know this is a very simple code, I just can't seem to nail down what is going wrong. Feeling really stupid right now.

Heres the code:

Code:

<html>
<head>
<script language="JavaScript">
var choice=confirm("Press ok for black. Press cancel for red.");
if (choice==true){
	document.bgColor="yellow";
	document.fgColor="black";
	}
else {
	document.bgColor="red";
	document.fgColor="white";
	}
</script>
<body>
<p>words</p>
</body>
</html>

If someone could take a second to set me straight, I would really appreciate it.

btw: hope I posted all this according to the "rules". I tried

I am currently making a website with 2 Frames, top and bottom. Top Frame will be a table. Bottom Frame will be a row with the information from the last row *you* clicked in Top Frame.

______________________________
| |
| TABLE HERE |
| |
|_____________________________|
| |
| copy of last row clicked from ^^ |
|_____________________________|

there is a onclick event for the table in Top Frame that changes the row in Bottom Frame to *this* row.

here is the javascript function I think should work....

Code:

function changeRow(id)
{
    alert(id.innerHTML);
    parent.frames.FRAME2.TABLE_B.innerHTML = id.innerHTML;
}

this is index.php
Code:

<html>
<frameset rows = "60%, 40%">
<frame src = "table_driver.php" name = "A" id = "FRAME1">
<frame src = "bottom_row.php" name = "B" id = "FRAME2">
</frameset>
</html>

and bottom_row.php which creates an empty table to be filled by the onclick event
Code:

<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
<script type = "text/javascript" src="java_script.js"></script>
</head>

<body>
<table id = "TABLE_B"><tr><td>Hello</td></tr></table>
</body>
</html>

I have a table row that I would like to have change color when onMouseOver, and revert back onMouseOut. That works fine. Now, I have added an onClick event, which when they click I want the color to stay.

Here is what I have. It works, sort of, that is it changes only the first row and not the one I clicked. How do I refer to the row that is clicked?

Thanks!

Code:

<script type="text/javascript">
function check(x)
{
document.getElementById("rowColor").bgColor=x
}
</script>

<tr id="rowColor" onClick="check('#99FF99');" onMouseOver="this.bgColor='#99FF99';" onMouseOut="this.bgColor='#FFFFFF';"><div>

Hello Everyone,

I'm new to JavaScript and I need some help,

What I'm trying to do is type a background color for the content area of a table by using the prompt box.

This is the code I had but it didn't work:

<html>
<head><title>Practice</title>
<script type="text/javascript">
//content color
var table = prompt("Choose a color for the content area", "white ");
document.write("<table BGCOLOR=" + table + " >");
</script>
</head>

<body bgcolor="black">

<table bgcolor="" width="600px" height="600px" cellpadding="15" border="0" align="center">
<!-- ============ HEADER ============== -->
<tr>
<td height="35px" colspan="2" align="center"><p align="center"><a href="http://www.youtube.com/">YouTube</a> | <a href="http://www.facebook.com/">Facebook</a> | <a href="http://www.twitter.com/">Twitter</a> | <a
</td></tr>

<!-- ============ LEFT COLUMN (CONTENT) ============== -->
<tr>
<td rowspan="6" width="500" valign="top"><td></tr>
<input type="file" onclick="disp_prompt()" value="Display a prompt box" />
<script type="text/javascript">
var
<!-- ============ RIGHT COLUMN ============== -->
<tr><td width="174px" valign="top">
</td></tr>
<!-- ============ FOTTER ============== -->
<tr>
<td height="35px" colspan="2" align="center">
</td></tr>
</body>

</html>


Here's the code a friend gave me but it didn't work either:

<script type="text/javascript">
var contentbg = prompt("What background color would you like your content to be?", "White");
document.write("<table align=\"center\" border=\"1\" cellpadding=\"15\" width=\"600\" height=\"600\" bgcolor=\"" + contentbg + "\">");
</script>

Please! help me out.

Thanks.

Hello,

Can someone please show me how to do the following in Javascript.

I basically want the background color of a div (banner) to change when the user clicks a green or blue table cell. So if they click the blue table cell, the backgound color of the div changes to blue (its green by default).
Also, when they have picked what color they want, I'd like the color to be stored in the value of the form 'BannerBGColor' so I can post their banner color to database. Any help is greatly appreciated. Many thanks

--------------------------------------------------------------------------
Banner:

<div style="width:400px; float:center; background:#00FF00; border-color:#000000; border-style: solid; border-width: 2px;">
<p>This is a banner.</p></div>';


--------------------------------------------------------------------------

Colour picker table to change colour of Banner above:

<table width="300" border="1" cellspacing="1" cellpadding="1">
<tr>
<td colspan="2">Pick a color below to change banner background:</td>
</tr>
<tr>
<td bgcolor="#00FF00">Green</td>
<td bgcolor="#00FFFF">Blue</td>
</tr>
</table>

-------------------------------------------------------------------------
Form field to insert chosen Banner Background colour when form is submitted -

<input type="text" name="BannerBGColor" value="'.$_POST['BannerBGColor'].'">

Hello,

I am trying to change the background color of a table based on the value of a picklist. For instance. if the picklist value was "1", then the background color of the table should be red. Not sure where I went wrong in my code.

Code:

<html>
	<body>
		<script type="text/javascript">
			
			if (level="1")
			{
				levelColor =  #FF0000;
			}
		</script>
		<select name="level">
			<option value="1">1
			<option value="2">2
			<option value="3">3
			<option value="4">4
			<option value="5">5
		</select>
			<br><br>
		<center>
		<table name="levelColor" width="700px" height="100px" cellspacing="0" cellpadding="0" border="1"> 
			<tr>
			<td><center>This is the level.</center></td>
			</tr>
		</table>
		</center>
</body>
</html>

Please help. Thank you.

Hi,
I have a php script that displays database data in a web table. I also have a javascript code which is supposed to compare the value entered in a web form to that hard coded in the script and change the color to green if its below, amber if its equal and red if its greater than.
Below is my javascript code: Code:

<script type="text/javascript">

function hallo(){

var value1=200
var inputVal = window.document.getElementById("one").value;

//alert(negNum);
if(inputVal > value1){
window.document.getElementById("color").style.color="red";
}
else
if(inputVal < value1)
{
window.document.getElementById("color").style.color="green";
}
else
if(inputVal == value1)
{
window.document.getElementById("color").style.color="#FF7E00";
}
}

</script>

And below is my php script that displays the data in a web table.
Code:

<body>
<form>
Value1: <input type="text" name="one" id="one" ><br/>
Value2: <input type="text" name="two" id="two" value="" onClick="hallo();">
<br/>
Value3: <input type="text" name="three" id="$cell" value="test data">
</form>
<?php
require_once("database.php");
$CustID=$_POST['CustomerID'];

$query="SELECT c.*,r.Meter_No,r.January,r.February,r.March,r.April,r.May,r.June FROM customer AS c,readings AS r   WHERE c.CustomerID=r.CustomerID
AND c.CustomerID='".$CustID."'";
$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();
?>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<th><font face="Arial, Helvetica, sans-serif">CustomerID</font></th>
<th><font face="Arial, Helvetica, sans-serif">Title</font></th>
<th><font face="Arial, Helvetica, sans-serif">First_Name</font></th>
<th><font face="Arial, Helvetica, sans-serif">Last_Name</font></th>
<th><font face="Arial, Helvetica, sans-serif">Meter_No</font></th>
<th><font face="Arial, Helvetica, sans-serif">January</font></th>
<th><font face="Arial, Helvetica, sans-serif">February</font></th>
<th><font face="Arial, Helvetica, sans-serif">March</font></th>
<th><font face="Arial, Helvetica, sans-serif">April</font></th>
<th><font face="Arial, Helvetica, sans-serif">May</font></th>
<th><font face="Arial, Helvetica, sans-serif">June</font></th>
</tr>

<?php
$i=0;
while ($i < $num) {

$f1=mysql_result($result,$i,"CustomerID");
$f2=mysql_result($result,$i,"Title");
$f3=mysql_result($result,$i,"First_Name");
$f4=mysql_result($result,$i,"Last_Name");
$f5=mysql_result($result,$i,"Meter_No");
$f6=mysql_result($result,$i,"January");
$f7=mysql_result($result,$i,"February");
$f8=mysql_result($result,$i,"March");
$f9=mysql_result($result,$i,"April");
$f10=mysql_result($result,$i,"May");
$f11=mysql_result($result,$i,"June");
?>

<tr>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f4; ?></font></td>
<td><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f6; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f7; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f8; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f9; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f10; ?></font></td>
<td id="color"><font face="Arial, Helvetica, sans-serif"><?php echo $f11; ?></font></td>
</tr>

<?php
$i++;
}
?>
</body>

As you can see from my javascript, i am getting the elements by id (getElementById("color")).
Currently, only the first <td> with id='color' is changing when the value is entered.
How do I make the text in other table cells with id='color' change color when the comparison value is entered?

I am working on a project where I have 5 XML files that I bring into HTML and display the tables on one browser page. I would like for the row of the tables to change depending on what is in the "status" field. There will only be the following inputs in that column - "IS" which is in stock(green), "OS" which is out of stock(red), and "PO" which is Pre-Order(blue).
Code:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ABC Book Store</title>
<style type="text/css">
<!--
.style1 {
	 font-size: 10pt;
}
-->
</style>

<script>
function ld_fiction()
{
var doc=nb_fiction.XMLDocument;
doc.load("fiction.xml");
document.getElementById("head_id").innerHTML="Fiction "; 
 
}
function Id_nfiction()
{
var doc_s=nb_nfiction.XMLDocument;
doc_s.load("nfiction.xml");
document.getElementByID("head_id_d").innerHTML="NonFiction";
}

function ID_selfhelp()
{
var doc_t=nb_selfhelp.XMLDocument;
doc_t.load("selfhelp.xml");
document.getElementByID("head_id_e").innerHTML="SelfHelp";
}

function ID_reference()
{
var doc_u=nb_ref.XMLDocument;
doc_u.load("ref.xml");
document.getElementByID("head_id_f").innerHTML="Reference";
}

function ID_mags()
{
var doc_v=nb_mags.XMLDocument;
doc_v.load("mags.xml");
document.getElementByID("head_id_g").innerHTML="Mags";
}




</script>

<XML id="nb_fiction" src="fiction.xml"></XML>
<XML id="nb_nfiction" src="nfiction.xml"></XML>
<XML id="nb_selfhelp" src="selfhelp.xml"></XML>
<XML id="nb_ref" src="ref.xml"></XML>
<XML id="nb_mags" src="mags.xml"></XML>



<object id="nb_fiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
width="0" height="0"></object>

<object id="nb_nfiction" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
width="0" height="0"></object>

<object id="nb_selfhelp" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
width="0" height="0"></object>

<object id="nb_ref" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
width="0" height="0"></object>

<object id="nb_mags" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
width="0" height="0"></object>

<body>
<table width="30%" border="0" align="left" cellspacing="1" font size="10">


  <tr bgcolor="#CCCCCC">
    <td colspan="2">
				<table id="FICTIONTABLE" table width="100%"  datasrc="#nb_fiction" font size="1" border="0" align="center" bordercolor="#FFFFFF">
				  <caption>
					<span>Fiction        </span>
				  </caption>
					<thead>
				  <tr>
					<th span class="style1">Stock No.</th></span>
					<th span class="style1">Title</th></span>
					<th span class="style1">Author</th></span>
					<th span class="style1">Status</th></span>
					<th span class="style1">Price</th></span>
					<th span class="style1">Publisher</th></span>
					<th span class="style1">Year of Release</th></span>
				  </tr>
				</thead>
				<tbody>
				  <tr>
					<td><span class="style1" datafld="stock"></td></span>
					<td><span class="style1" datafld="title"></td></span>
					<td><span class="style1" datafld="author"></td></td></span>
					<td><span class="style1" datafld="status"></td></span>
					<td><span class="style1" datafld="price"></td></span>
					<td><span class="style1" datafld="publisher"></td></span>
					<td><span class="style1" datafld="year"></td></span>
					
					
					
				  </tr>
				  </tbody>
				</table>
				
	</td>
  </tr>
</body>
</html>

I only included the first part of the html code along with the first table, but there is a table for each xml file. You can also probably tell how the XML files are structured by looking at the way they are displayed in the tables.
I think what I want to do can be accomplished with JavaScript, but I have no idea how to do it and it's the only thing I have left before I'm done.
Any help would really be appreciated and thanks in advance.

Hi! New to JS... have been trying to rework this to call additional, independent sets of colors to cycle through (so it would loop thru a set of grays, a set of primary colors, etc). I would use perhaps a different function name in the HTML to call different sets of colors. If this is more complex than I think it is, I think 3 sets would be plenty. Would be hugely grateful for any help, thanks so much in advance. (demo link of script in current state at bottom)


Code:

<html><head><title></title>
<script language=javascript>

colors = ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"];

cRGB = [];

function toRGB(color){
   
var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")";
   
return rgb;
}

for(var i=0; i<colors.length; i++){
cRGB[i] = toRGB(colors[i]);
}

function changeColor(target){

var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor;

var set = false;

var xx;

for(var i=0; i<cRGB.length; i++){

if(swapper == cRGB[i]){   

if(((i+1)) >= cRGB.length){
            
xx = 0;        
}else{
xx = i+1;
}

document.getElementById(target).style.backgroundColor = colors[xx];
		document.getElementById(target).style.backgroundImage.show;

         
set = true;
i=cRGB.length;
}
}
   

set ? null : document.getElementById(target).style.backgroundColor = colors[1];
}

</SCRIPT>

</head>
<body bgcolor="#333333">
<div>
<div id="a1" onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background1.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: none"></div>
<div id=a2 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background2.gif); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div>
<div id=a3 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background3.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div></div>

</body>
</html>

Demo:
http://theclutch.com/rollover_color_..._bgndimage.htm