Change DIV BGcolor onmousover an array of colors

**latendresse76** · 11-05-2012, 02:14 AM

I suck at javascript.....

OK so i have redone a site and the owner wants the BG color change that it had, the site used frames

and the script below. my issue is that the part i need to make change is a DIV and the BG color for the page is static. all th colors are assigned via the CSS but i could change that. on another note could same be done with lightbox overlay? the farther down script is the one that controls the overlay look

Code:

<head>
<script language="JavaScript">

var backColor = new Array(); 

backColor[0] = '#FFFFFF';
backColor[1] = '#FCF9D1';
backColor[2] = '#EEDBC5';
backColor[3] = '#FDDCB9';
backColor[4] = '#F0C390';
backColor[5] = '#CCF5C6';
backColor[6] = '#BD090E';
backColor[7] = '#AA4A0F';
backColor[8] = '#4386B2';
backColor[9] = '#0B5483';
backColor[10] = '#333366';


function changeBG(whichColor){
document.bgColor = backColor[whichColor];
}

</script>
</head>
<body>
<font color="#000000" face="Arial" size="2">Select<br>
      Wall<br>
      Color</font><br>
      <a href="#" onmouseover="javascript:changeBG(0)"> <img src="http://www.andersonart.com/images/background/FFFFFF.jpg" width="25" height="25" border="0"></a> 
      <br>
      <a href="#" onmouseover="javascript:changeBG(1)"> <img src="http://www.andersonart.com/images/background/FCF9D1.jpg" width="25" height="25" border="0"></a> 
      <br>
      <a href="#" onmouseover="javascript:changeBG(2)"> <img src="http://www.andersonart.com/images/background/EEDBC5.jpg" width="25" height="25" border="0"></a> 
      <br>
      <a href="#" onmouseover="javascript:changeBG(3)"> <img src="http://www.andersonart.com/images/background/FDDCB9.jpg" width="25" height="25" border="0"></a> 
      <br>
      <a href="#" onmouseover="javascript:changeBG(4)"> <img src="http://www.andersonart.com/images/background/F0C390.jpg" width="25" height="25" border="0"></a> 
      <br>
      <a href="#" onmouseover="javascript:changeBG(5)"> <img src="http://www.andersonart.com/images/background/CCF5C6.jpg" width="25" height="25" border="0"></a> 
      <br>
      <a href="#" onmouseover="javascript:changeBG(6)"> <img src="http://www.andersonart.com/images/background/BD090E.jpg" width="25" height="25" border="0"></a> 
      <br>
      <a href="#" onmouseover="javascript:changeBG(7)"> <img src="http://www.andersonart.com/images/background/AA4A0F.jpg" width="25" height="25" border="0"></a> 
      <br>
      <a href="#" onmouseover="javascript:changeBG(8)"> <img src="http://www.andersonart.com/images/background/4386B2.jpg" width="25" height="25" border="0"></a> 
      <br>
      <a href="#" onmouseover="javascript:changeBG(9)"> <img src="http://www.andersonart.com/images/background/0B5483.jpg" width="25" height="25" border="0"></a> 
      <br>
      <a href="#" onmouseover="javascript:changeBG(10)"> <img src="http://www.andersonart.com/images/background/333366.jpg" width="25" height="25" border="0"></a>
</body>

the lightbox overlay script

Code:

<script type="text/javascript">
$(document).ready(function() {
$("a#USF_BG").fancybox({
'opacity': true,
'overlayColor': '#222',
'overlayOpacity': 0.7,
'transitionIn': 'elastic',
'transitionOut': 'elastic'
});

});
</script>