problem with arrays, trying to dynamicly change the background of tabs


I'm trying to figure out how to use an array with the below code:


/*////original working
code /////////////////////////////////////////////////////////////
function myTabs()
{

document.getElementById('bg_image').style.backgroundImage="url('../
image_files/images/Tab2.gif')";

}

function changeBG()
{

document.getElementById('bg_image').style.backgroundImage="url('../
image_files/images/Tab3.gif')";
}


function myTabs1()
{

document.getElementById('bg_image1').style.backgroundImage="url('../
image_files/images/Tab2.gif')";

}

function changeBG1()
{

document.getElementById('bg_image1').style.backgroundImage="url('../
image_files/images/Tab3.gif')";
}

*/

There are 6 tabs that swap background images. Therefore I tried to
create and array that will load and dynamicly change the background
image.

for example:



<html>

<script language="javascript" type="text/javascript">

<!-- work on puting functions in an array system-->

function myTabs()
{

if (document.getElementById)
{
var i;
for (i=0; i<document.getElementById.length; i++)
{
document.getElementById('bg_image'+i).style.backgroundImage="url('../
image_files/images/Tab1.gif')";

}
}

function changeBG()
{

if (document.getElementById)
{
var j;
for (j=0; i<document.getElementById.length; j++)
{
document.getElementById('bg_image'+j).style.backgroundImage="url('../
image_files/images/Tab2.gif')";

}
}

</script>
</head>


<body>
<li><div class="backg" onmouseover="changeBG()"
onmouseout="myTabs()" id="bg_image1"><a href="<?=$site_dir?>/
advertisers"><img src="<?=$img_dir?>/images/nav_spacer.gif"
width="100" height="2" border="0" /><br />
</body>
</html>

help plz...

.

Relevant Pages