Can't get referencing element by id to work in mozilla

Discussion in 'HTML' started by James McGuigan, Jul 20, 2003.

  1. I'm having trouble getting this seemingly simple bit of dynamic HTML to work
    under Mozilla 1.4. It works fine under IE6 and in Opera 7, so I can't be too
    far off. Been playing around with this for hours now and searching the web
    for answers, and I'm obviously missing something here, as Mozilla is
    generally very standards compliant.

    The code is suppost to swap the background image in the top cell for a
    different image for the onMouseOver event. The code will execute if I change
    the reference from r4.className="" to this.className="" (but obviously
    change the wrong item). So how do I get it to change the background of
    another element as I'll be wanting to extend this onMouseOver to affect
    several elements in a larger image map.

    Is there another method to achieve the same result?

    Many thanks in advance.



    -----
    Code:
    -----
    
    ..earth-r4-1 { background-image: url(images/title/earth_r4_c1.jpg); }
    ..earth-r5-1 { background-image: url(images/title/earth_r5_c1.jpg); }
    
    <td width="270" class="earth-r4-1" id="r4">&nbsp;</td>
    <td valign="middle"><a href="introduction.htm" class="titlepagelink"
    onMouseOver="r4.className='earth-r5-1'"
    onMouseOut ="r4.className='earth-r4-1'">
    Introduction</a></td>
    
    -----
    -----


    --
    Rules are written for those who lack the ability to truly reason,
    But for those who can, rules become nothing more than guidelines,
    And live their lives governed not by rules but by reason.
    - James McGuigan

    The Stars! FAQ (www.starsfaq.com)
    Earth Emergency - A Call to Action (www.earthemergency.org)
    James McGuigan, Jul 20, 2003
    #1
    1. Advertising

  2. DU wrote:

    >> -----
    Code:
    -----[/color]
    >[color=green]
    >> <td width="270" class="earth-r4-1" id="r4">&nbsp;</td>
    >> <td valign="middle"><a href="introduction.htm" class="titlepagelink"
    >>   onMouseOver="r4.className='earth-r5-1'"
    >>   onMouseOut ="r4.className='earth-r4-1'">[/color]
    >
    >
    >    onMouseOver="document.getElementById('r4').className='earth-r5-1';"
    >    onMouseOut ="document.getElementById('r4').className='earth-r4-1';">
    >
    > I believe it is not recommended to have "-" in the class name.
    >[color=green]
    >> -----
    -----
    >>
    >>

    >
    > I tested a page with dynamic changing of background-image for a cell in
    > Mozilla 1.4, Opera 7.20 and MSIE 6 for windws and it worked in all 3
    > browsers.
    >
    > DU


    That seems to have done the trick, thanks.

    Next question, how do I get this code to work in a function?

    This code works perfectly:
    -----
    Code:
    -----
    <td width="270" background="images/title/earth_r3_c1.jpg" d="r3">&nbsp;</td>
    <td valign="middle">
    <a href="introduction.htm"
    onMouseOver="
    document.getElementById('r2').style.background='url(images/title/earth-blue_r2_c1.jpg)';
    document.getElementById('r3').style.background='url(images/title/earth-blue_r3_c1.jpg)';
    document.getElementById('r4').style.background='url(images/title/earth-blue_r4_c1.jpg)';
    document.getElementById('r5').style.background='url(images/title/earth-blue_r5_c1.jpg)';
    document.getElementById('r6').style.background='url(images/title/earth-blue_r6_c1.jpg)';
    document.getElementById('r7').style.background='url(images/title/earth-blue_r7_c1.jpg)';"
    onMouseOut="
    document.getElementById('r2').style.background='url(images/title/earth_r2_c1.jpg)';
    document.getElementById('r3').style.background='url(images/title/earth_r3_c1.jpg)';
    document.getElementById('r4').style.background='url(images/title/earth_r4_c1.jpg)';
    document.getElementById('r5').style.background='url(images/title/earth_r5_c1.jpg)';
    document.getElementById('r6').style.background='url(images/title/earth_r6_c1.jpg)';
    document.getElementById('r7').style.background='url(images/title/earth_r7_c1.jpg)';"
    class="titlepagelink"> Introduction</a></td>
    -----
    -----


    However trying to do it as a function doesn't work in any browser:

    -----[/code]-----
    <script><!--

    function earth()
    {
    document.getElementById('r2').style.background='url(images/title/earth_r2_c1.jpg)';
    document.getElementById('r3').style.background='url(images/title/earth_r3_c1.jpg)';
    document.getElementById('r4').style.background='url(images/title/earth_r4_c1.jpg)';
    document.getElementById('r5').style.background='url(images/title/earth_r5_c1.jpg)';
    document.getElementById('r6').style.background='url(images/title/earth_r6_c1.jpg)';
    document.getElementById('r7').style.background='url(images/title/earth_r7_c1.jpg)';
    }

    function earth-blue()
    {
    document.getElementById('r2').style.background='url(images/title/earth-blue_r2_c1.jpg)';
    document.getElementById('r3').style.background='url(images/title/earth-blue_r3_c1.jpg)';
    document.getElementById('r4').style.background='url(images/title/earth-blue_r4_c1.jpg)';
    document.getElementById('r5').style.background='url(images/title/earth-blue_r5_c1.jpg)';
    document.getElementById('r6').style.background='url(images/title/earth-blue_r6_c1.jpg)';
    document.getElementById('r7').style.background='url(images/title/earth-blue_r7_c1.jpg)';
    }
    --></SCRIPT>


    <td width="270" background="images/title/earth_r3_c1.jpg" d="r3">&nbsp;</td>
    <td valign="middle">
    <a href="introduction.htm"
    onMouseOver="earth-blue();"
    onMouseOut="earth-();"
    class="titlepagelink"> Introduction</a></td>

    -----[/code]-----

    Any hints as to where I going wrong.

    --
    Rules are written for those who lack the ability to truly reason,
    But for those who can, rules become nothing more than guidelines,
    And live their lives governed not by rules but by reason.
    - James McGuigan

    The Stars! FAQ (www.starsfaq.com)
    Earth Emergency - A Call to Action (www.earthemergency.org)
    James McGuigan, Jul 20, 2003
    #2
    1. Advertising

  3. James McGuigan wrote:
    > However trying to do it as a function doesn't work in any browser:
    >
    > -----[/code]-----
    > <script><!--
    >
    > function earth()
    > {
    > document.getElementById('r2').style.background='url(images/title/earth_r2_c1.jpg)';
    > document.getElementById('r3').style.background='url(images/title/earth_r3_c1.jpg)';
    > document.getElementById('r4').style.background='url(images/title/earth_r4_c1.jpg)';
    > document.getElementById('r5').style.background='url(images/title/earth_r5_c1.jpg)';
    > document.getElementById('r6').style.background='url(images/title/earth_r6_c1.jpg)';
    > document.getElementById('r7').style.background='url(images/title/earth_r7_c1.jpg)';
    >
    > }
    >
    > function earth-blue()
    > {
    > document.getElementById('r2').style.background='url(images/title/earth-blue_r2_c1.jpg)';
    > document.getElementById('r3').style.background='url(images/title/earth-blue_r3_c1.jpg)';
    > document.getElementById('r4').style.background='url(images/title/earth-blue_r4_c1.jpg)';
    > document.getElementById('r5').style.background='url(images/title/earth-blue_r5_c1.jpg)';
    > document.getElementById('r6').style.background='url(images/title/earth-blue_r6_c1.jpg)';
    > document.getElementById('r7').style.background='url(images/title/earth-blue_r7_c1.jpg)';
    >
    > }
    > --></SCRIPT>
    >
    >
    > <td width="270" background="images/title/earth_r3_c1.jpg"
    > d="r3">&nbsp;</td>
    > <td valign="middle">
    > <a href="introduction.htm"
    > onMouseOver="earth-blue();"
    > onMouseOut="earth-();"
    > class="titlepagelink"> Introduction</a></td>
    >
    > -----[/code]-----
    >
    > Any hints as to where I going wrong.
    >


    I just figured out my own mistake, with a little bit of insperation from the
    error messages generated in Netscape 3

    I think it might actually be the "-" in the function name that was causing
    the problem. Renamed it to
    onMouseOver="earth-blue();"

    and the code works fine now.

    --
    Rules are written for those who lack the ability to truly reason,
    But for those who can, rules become nothing more than guidelines,
    And live their lives governed not by rules but by reason.
    - James McGuigan

    The Stars! FAQ (www.starsfaq.com)
    Earth Emergency - A Call to Action (www.earthemergency.org)
    James McGuigan, Jul 20, 2003
    #3
  4. James McGuigan wrote:

    [javascript]
    >
    > I just figured out my own mistake
    >


    oh good - I like happy endings. I don't suppose you (or some other kind
    soul) could take a look at my current bugbear and suggest how I fix it:
    http://williamtasso.com/wt/sitemap.asp

    function smcollapse() just doesn't want to play in Mozilla - clues (very
    much) appreciated.

    --
    William Tasso - http://www.WilliamTasso.com
    William Tasso, Jul 20, 2003
    #4
  5. William Tasso wrote:
    > oh good - I like happy endings. I don't suppose you (or some other kind
    > soul) could take a look at my current bugbear and suggest how I fix it:
    > http://williamtasso.com/wt/sitemap.asp
    >
    > function smcollapse() just doesn't want to play in Mozilla - clues (very
    > much) appreciated.
    >

    Works for me, Mozilla 1.4.
    Leif K-Brooks, Jul 21, 2003
    #5
  6. Leif K-Brooks wrote:
    > William Tasso wrote:
    >> oh good - I like happy endings. I don't suppose you (or some other
    >> kind soul) could take a look at my current bugbear and suggest how I
    >> fix it: http://williamtasso.com/wt/sitemap.asp
    >>
    >> function smcollapse() just doesn't want to play in Mozilla - clues
    >> (very much) appreciated.
    >>

    > Works for me, Mozilla 1.4.


    Thanks - maybe time to upgrade then (from 1.3.1). Javascript is not my
    strongest skill and I was wondering if my enthusiasm had overtaken my
    abilities.

    --
    William Tasso - http://www.WilliamTasso.com
    William Tasso, Jul 21, 2003
    #6
  7. William Tasso wrote:

    > Leif K-Brooks wrote:
    >
    >>William Tasso wrote:
    >>
    >>>oh good - I like happy endings. I don't suppose you (or some other
    >>>kind soul) could take a look at my current bugbear and suggest how I
    >>>fix it: http://williamtasso.com/wt/sitemap.asp
    >>>
    >>>function smcollapse() just doesn't want to play in Mozilla - clues
    >>>(very much) appreciated.
    >>>

    >>
    >>Works for me, Mozilla 1.4.

    >
    >
    > Thanks - maybe time to upgrade then (from 1.3.1). Javascript is not my
    > strongest skill and I was wondering if my enthusiasm had overtaken my
    > abilities.


    The biggest bug I had in my recent switchover was the multizilla plugin that
    doesn't doesn't Mozilla 1.4. The plugin gets installed into your profile folder
    (C:\Documents and Settings\Administrator\
    Application Data\Mozilla\Profiles\default\7l5qz99x.slt\chrome) on my
    computer (I log on under Administrator, otherwise use your username)

    Find and delete multiviews.jar or alternatively create a new profile (and
    lose all your saved settings).

    Major symptoms of Multizilla on 1.4 are back-button doesn't work, URL not
    showing in nav bar and new tabs aligning to the right side of the screen.

    The things I miss most without multizilla is the quickprefs button (the
    quickprefs.mozdev.org is for phenoix only). Anyone else know

    The googlebar I've replaced with needlesearch (which is actually better)

    I just figured out how to add the google translate facility into
    NeedleSearch. Add this as a search engine:
    http://translate.google.com/translate?sourceid=navclient&hl=en&u=NeedleSearch/
    And then simply copy/paste the url into the search bar. Though I'm still
    having difficulty getting the waybackmachine (http://www.archive.org/) to
    work properly with it.



    --
    Rules are written for those who lack the ability to truly reason,
    But for those who can, rules become nothing more than guidelines,
    And live their lives governed not by rules but by reason.
    - James McGuigan

    The Stars! FAQ (www.starsfaq.com)
    Earth Emergency - A Call to Action (www.earthemergency.org)
    James McGuigan, Jul 21, 2003
    #7
    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. Woolly Mittens
    Replies:
    8
    Views:
    430
    Woolly Mittens
    Sep 22, 2003
  2. Henri
    Replies:
    9
    Views:
    1,828
    Toby Inkster
    Feb 22, 2005
  3. HANM
    Replies:
    2
    Views:
    706
    Joseph Kesselman
    Jan 29, 2008
  4. njsimha
    Replies:
    0
    Views:
    439
    njsimha
    Sep 12, 2008
  5. Xeno Campanoli
    Replies:
    1
    Views:
    339
    James Britt
    Jul 1, 2005
Loading...

Share This Page