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

Discussion in 'Javascript' started by Leoa, Aug 30, 2007.

  1. Leoa

    Leoa Guest

    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...
    Leoa, Aug 30, 2007
    #1
    1. Advertising

  2. On Aug 30, 2:11 pm, Leoa <> wrote:
    > 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...


    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
    David Golightly, Aug 31, 2007
    #2
    1. Advertising

  3. On Aug 30, 2:11 pm, Leoa <> wrote:
    > 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...


    By the way, document.getElementById is a function. Why do you think
    it will behave like an Array?
    David Golightly, Aug 31, 2007
    #3
  4. Leoa

    Leoa Guest

    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//////////////////////////////////////////////////////////////////////
    Leoa, Sep 4, 2007
    #4
  5. Leoa

    ASM Guest

    Re: problem with arrays, trying to dynamicly change the backgroundof tabs

    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;
    > }


    #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>


    <script type="text/javascript">

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

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

    </script>

    >
    > </head>
    > <body>
    >
    > <div id="foo"></div>
    >
    > <div id="links">


    <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</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");


    // bellow a coma is missing

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


    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]+"')";


    "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//////////////////////////////////////////////////////////////////////
    >
    ASM, Sep 6, 2007
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Henke
    Replies:
    0
    Views:
    1,499
    Henke
    Feb 26, 2004
  2. EMW
    Replies:
    2
    Views:
    4,500
    Eliyahu Goldin
    Nov 7, 2005
  3. qwweeeit
    Replies:
    2
    Views:
    629
    qwweeeit
    Dec 14, 2005
  4. rantingrick

    Tabs -vs- Spaces: Tabs should have won.

    rantingrick, Jul 16, 2011, in forum: Python
    Replies:
    95
    Views:
    1,779
    Roy Smith
    Jul 19, 2011
  5. John Kopanas
    Replies:
    2
    Views:
    258
    Gregory Brown
    Jan 29, 2007
Loading...

Share This Page