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

L

Leoa

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...
 
D

David Golightly

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...
Click to expand...

I'd like to help, but trying to read your code as posted above is
giving me a headache. Could you please repost with proper
indentation? Also, my first recommendation is NOT to set the "style"
attribute of your elements but rather to set the "classname" attribute
and have the classnames defined in a stylesheet that describes which
images correspond to which classnames. CSS chrome doesn't belong in
JavaScript.

Thanks,
-David
 
D

David Golightly

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...
Click to expand...

By the way, document.getElementById is a function. Why do you think
it will behave like an Array?
 
L

Leoa

Thanks David for looking at this.
My goal is to switch the background image on the tabs in the main menu
of a website.
Becasue this site has a few menus in it, i'd like to use an array to
store the swaped images.



I've been working on it and I made a working example that is close to
what i want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>innerHTML</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
background:#aaaaaa;
}
#foo {
position:absolute;
top:60px;
left:400px;
}
#links {
width:70px;
border:solid 1px #000000;
}

/*//]]>*/
</style>

<script type="text/javascript">

var aAuthor = new Array("Tab2.jpg", "Tab2.jpg", "Tab2.jpg");
var bAuthor = new Array("Tab3.jpg", "Tab3.jpg", "Tab3.jpg");
var urls="image_files/images/";


function writeScroll(num)
{
document.getElementById("foo").style.backgroundImage =
"url('"+urls+aAuthor[num]+"')";
}

function writeScroll2(num)
{
document.getElementById("foo").style.backgroundImage =
"url('"+urls+bAuthor[num]+"')";

}

</script>

</head>
<body>

<div id="foo"></div>

<div id="links">
<a href="#"onmouseover="writeScroll(0)"
onmouseout="writeScroll2(0)">golf</a><br />
<a href="#"onmouseover="writeScroll(1)"
onmouseout="writeScroll2(1)">MTV</a><br />
<a href="#"onmouseover="writeScroll(2)"
onmouseout="writeScroll2(2)">Dating</a>
</div>

</body>
</html>

However when I put this code in a php module it does not work:


///tabs_3.php ///php module:////////////////////////////////////////////////////////////////////////
<script type="text/javascript">
alert("script is running");
var aTab = new Array("Tab2.gif", "Tab2.gif", "Tab2.gif" "Tab2.gif",
"Tab2.gif", "Tab2.gif");
var bTab = new Array("Tab3.gif", "Tab3.gif", "Tab3.gif" "Tab3.gif",
"Tab3.gif", "Tab3.gif");

var urls="image_files/images/";


function writeScroll(num)
{
document.getElementById("bg_image").style.backgroundImage =
"url('"+urls+aTab[num]+"')";
}

function writeScroll2(num)
{
document.getElementById("bg_image").style.backgroundImage =
"url('"+urls+bTab[num]+"')";
}


function myTabs()
{
alert("function myTabs is running");
document.getElementById("bg_image").style.backgroundImage="url
('image_files/images/Tab2.gif')";
}



self.onload = function() {myTabs();}

</script>
/// tabs_3.php ///end of tabs_2.php module://////////////////////////////////////////////////

// header.php
file////////////////////////////////////////////////////////
//this file stores the layout off the tabs
<div class="backg" onmouseover="writeScroll(0)"
onmouseout="writeScroll2(0)" id="bg_image"><a
Home</a>
</div>
<div class="backg" onmouseover="writeScroll(1)"
onmouseout="writeScroll(1)" id="bg_image"><a>
Advertisers Agencies</a>
</div>
// end of header
file//////////////////////////////////////////////////////////////////

//
index.php//////////////////////////////////////////////////////////////////////////////
this file displays the tab menu

<body>

<?php include_once("include_files/config.php"); ?>

<div align="center">
<?php include_once("include_files/modules/tabs_3.php"); ?>
</body>

/// end of
index.php//////////////////////////////////////////////////////////////////////
 
A

ASM

En réponse à Leoa qui écrivit, en date du : 4/09/07 22:47, le message
suivant :
Thanks David for looking at this.
My goal is to switch the background image on the tabs in the main menu
of a website.
Becasue this site has a few menus in it, i'd like to use an array to
store the swaped images.



I've been working on it and I made a working example that is close to
what i want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>innerHTML</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
background:#aaaaaa;
}
#foo {
position:absolute;
top:60px;
left:400px;
}
Click to expand...

#foo.Tab_0 { background-image: url(image_files/images/Tab0.jpg }
#foo.Tabo_0 { background-image: url(image_files/images/Tabo0.jpg }
#foo.Tab_1 { background-image: url(image_files/images/Tab1.jpg }
#foo.Tabo_2 { background-image: url(image_files/images/Tabo1.jpg }
#foo.Tab_3 { background-image: url(image_files/images/Tab2.jpg }
#foo.Tabo_3 { background-image: url(image_files/images/Tabo2.jpg }
#links {
width:70px;
border:solid 1px #000000;
}

/*//]]>*/
</style>
Click to expand...

<script type="text/javascript">

function M_over(num)
{
document.getElementById("foo").className = 'Tab_'+num;
}

function M_out(num)
{
document.getElementById("foo").className = 'Tabo_'+num;
}

</head>
<body>

<div id="foo"></div>

<div id="links">
Click to expand...

<a href="#"
onmouseover="M_over(0)"
onmouseout="M_out(0)">golf</a><br />
<a href="#"
onmouseover="M_over(1)"
onmouseout="M_out(1)">MTV</a><br />
<a href="#"
onmouseover="M_over(2)"
onmouseout="M_out(2)">Dating said:
</div>

</body>
</html>

However when I put this code in a php module it does not work:


///tabs_3.php ///php module:////////////////////////////////////////////////////////////////////////
<script type="text/javascript">
alert("script is running");
Click to expand...

// bellow a coma is missing
var aTab = new Array("Tab2.gif", "Tab2.gif", "Tab2.gif" "Tab2.gif",
"Tab2.gif", "Tab2.gif");
Click to expand...

var aTab = new Array(
"Tab2.gif",
"Tab2.gif",
"Tab2.gif",
"Tab2.gif",
"Tab2.gif",
"Tab2.gif"
);

var bTab = new Array("Tab3.gif", "Tab3.gif", "Tab3.gif" "Tab3.gif",
"Tab3.gif", "Tab3.gif");

var urls="image_files/images/";


function writeScroll(num)
{
document.getElementById("bg_image").style.backgroundImage =
"url('"+urls+aTab[num]+"')";
Click to expand...

"url("+urls+aTab[num]+")";

and ... you will need to wait the image loading
}

function writeScroll2(num)
{
document.getElementById("bg_image").style.backgroundImage =
"url('"+urls+bTab[num]+"')";
}


function myTabs()
{
alert("function myTabs is running");
document.getElementById("bg_image").style.backgroundImage="url
('image_files/images/Tab2.gif')";
}



self.onload = function() {myTabs();}

</script>
/// tabs_3.php ///end of tabs_2.php module://////////////////////////////////////////////////

// header.php
file////////////////////////////////////////////////////////
//this file stores the layout off the tabs
<div class="backg" onmouseover="writeScroll(0)"
onmouseout="writeScroll2(0)" id="bg_image"><a
Home</a>
</div>
<div class="backg" onmouseover="writeScroll(1)"
onmouseout="writeScroll(1)" id="bg_image"><a>
onmouseout="writeScrol2(1)"


Advertisers Agencies</a>
</div>
// end of header
file//////////////////////////////////////////////////////////////////

//
index.php//////////////////////////////////////////////////////////////////////////////
this file displays the tab menu

<body>

<?php include_once("include_files/config.php"); ?>

<div align="center">
<?php include_once("include_files/modules/tabs_3.php"); ?>
</body>

/// end of
index.php//////////////////////////////////////////////////////////////////////
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Remove Start Button from Clock 2
I am trying to detect Which image id="" was clicked ? 22
Only one table shows up with the information 2
I Need Help with making a function that draws in a canvas using location data. 1
How to change the color in this script 1
Help with my responsive home page 2
? Trouble with: passing dragElement(e.target.id); 8
Closing an overlay outside the overlay as well 1

Members online

No members online now.
Total: 24 (members: 1, guests: 23)
Robots: 342

Forum statistics

Threads
473,767
Messages
2,569,572
Members
45,045
Latest member
DRCM

Latest Threads

Top