/    Sign up×
Community /Pin to ProfileBookmark

Javascript works in IE, not in FireFox

This code performs correctly in IE, but in Firefox, only the first of the 3 icons works. The other 2 have no rollover effect and nothing happens when they are clicked.

The FireFox Javascript console lists no errors (at least none that seem related to this issue).

[code=html]<table width=”180″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>

<td><img src=”../images/common/icons_desc.gif” alt=”description” name=”desc” width=”127″ height=”17″ id=”desc” /></td>
<td><img src=”../images/common/Printerr_icons.gif” width=”53″ height=”17″ border=”0″ usemap=”#MapMap” /></td>
</tr><map name=”MapMap” id=”MapMap”>
<area shape=”rect” coords=”1,2,12,14″ href=”#” onclick=”window.print();return false;” onmouseover=”MM_swapImage(‘desc’,”,’../images/common/icons_printer.gif’,1)” onmouseout=”MM_swapImgRestore()” />
<script>document.write(emailScript);</script><!– handles the email a friend function –>
<area shape=”rect” coords=”37,0,50,14″ href=”../requestinfo.html” onmouseover=”MM_swapImage(‘desc’,”,’../images/common/icons_requestInfo.gif’,1)” onmouseout=”MM_swapImgRestore()” />
</map>
</table>[/code]

In the included JS file is the following:

[CODE]emailScript = “<area shape=”rect” coords=”20,3,33,15″ href=”mailto:?body=Check%20out%20what%20I%20found%20online:%20″+document.location+”&amp;subject=Check%20out%20this%20web%20page” onmouseover=”MM_swapImage(‘desc’,”,’http://www.secureworks.com/images/common/icons_email.gif’,1)” onmouseout=”MM_swapImgRestore()”/>”;
[/CODE]

By the way, if anyone can suggest a better way to achieve the same effect, I’d be happy to change the code. I suspecty it’s the cause of the problem.

Thanks in advance for any help.

to post a comment
JavaScript

10 Comments(s)

Copy linkTweet thisAlerts:
@phpnoviceJun 05.2006 — The FireFox Javascript console lists no errors (at least none that seem related to this issue).[/QUOTE]
Seemingly unrelated errors can cause other code to not be executed at all.
Copy linkTweet thisAlerts:
@RoryCauthorJun 05.2006 — Thanks, but the errors that do come up are all of the type

Error: Unknown property 'fontSize'. Declaration dropped.

Source File: http://www.mysite.com/industries/industriesoverview.html

Line: 0

which even this WebDeveloper.com site is throwing up... so I'm assuming they're not the problem. Plus, other JS functions on the page work fine.
Copy linkTweet thisAlerts:
@phpnoviceJun 05.2006 — How about a live link to your page on the Internet and a description of how to duplicate the problem? I can then run it through my JavaScript Debugger and find out what is the problem.
Copy linkTweet thisAlerts:
@RoryCauthorJun 05.2006 — http://www.secureworks.com/industries/industriesoverview.html

The icons are top right in the white area

Oddly, the same technique is used on the index.html page and there they work fine.
Copy linkTweet thisAlerts:
@Orc_ScorcherJun 05.2006 — Having both area and script elements as children of the map is not a good idea, the HTML spec says the following:When a MAP element contains mixed content (both AREA elements and block-level content), user agents must ignore the AREA elements.[/quote]You should either create all area elements without JS, document.write the complete map or add the third area element with the appendChild method.
Copy linkTweet thisAlerts:
@Orc_ScorcherJun 05.2006 — Or maybe the problem is that your map element is between </tr> and </table> tags. Try moving it to a more sane position.
Copy linkTweet thisAlerts:
@phpnoviceJun 05.2006 — OK, you basically have this:
[code=html]<!-- #BeginLibraryItem "/Library/Print_Email_Info.lbi" -->
<table width="180" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="../images/common/icons_desc.gif" alt="description"
name="desc" width="127" height="17" id="desc" />
</td>
<td>
<img src="../images/common/Printerr_icons.gif"
border="0" width="53" height="17" usemap="#MapMap" />
</td>
</tr>
<map name="MapMap" id="MapMap">
<area shape="rect" coords="1,2,12,14" href="#"
onclick="window.print();return false;"
onmouseover="MM_swapImage('desc','','../images/common/icons_printer.gif',1)"
onmouseout="MM_swapImgRestore()" />
<script>document.write(emailScript);</script><!-- handles the email a friend function -->
<area shape="rect" coords="37,0,50,14" href="../requestinfo.html"
onmouseover="MM_swapImage('desc','','../images/common/icons_requestInfo.gif',1)"
onmouseout="MM_swapImgRestore()" />
</map>
</table>[/code]

As mentioned, other than table-related tags, there shoudn't be anything inside a table that is not within TD tags. So, try coding it something more like this:
[code=html]<!-- #BeginLibraryItem "/Library/Print_Email_Info.lbi" -->
<table width="180" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="../images/common/icons_desc.gif" alt="description"
name="desc" width="127" height="17" id="desc" />
</td>
<td>
<map name="MapMap" id="MapMap">
<area shape="rect" coords="1,2,12,14" href="#"
onclick="window.print();return false;"
onmouseover="MM_swapImage('desc','','../images/common/icons_printer.gif',1)"
onmouseout="MM_swapImgRestore()" />
<area shape="rect" coords="37,0,50,14" href="../requestinfo.html"
onmouseover="MM_swapImage('desc','','../images/common/icons_requestInfo.gif',1)"
onmouseout="MM_swapImgRestore()" />
</map>
<img src="../images/common/Printerr_icons.gif"
border="0" width="53" height="17" usemap="#MapMap" />
<script>document.write(emailScript);</script><!-- handles the email a friend function -->
</td>
</tr>
</table>[/code]
Copy linkTweet thisAlerts:
@RoryCauthorJun 05.2006 — That did it! Moving the <map> tag was all it took! Thanks for the help!!!

By the way, i have a second, more challenging Javascript issue with the same site, posted on this board too... if you're greedy for punishment <g>

Thanks again.
Copy linkTweet thisAlerts:
@phpnoviceJun 05.2006 — I don't see another post of yours that I haven't already responded to.
Copy linkTweet thisAlerts:
@RoryCauthorJun 05.2006 — Thank you phpnovice, you have indeed responded to my other post, I just haven't had time to try it out. Your help is much appreciated in both cases.

My comment was actually directed to Orc Scorcher. I sent it before I saw yours.
×

Success!

Help @RoryC spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...