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

[James McGuigan]

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.



-----

-----

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

-----

-----[/QUOTE]
[QUOTE]
<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'">[/QUOTE]


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.
[QUOTE]
-----

-----

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

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

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)

 

[William Tasso]

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.

 

[Leif K-Brooks]

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.

 

[William Tasso]

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.

 

[James McGuigan]

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)