View Full Version : Script working in IE, not in Firefox

Feb 10th, 2011, 11:47 AM
Nice for a change: a piece of code that does work in all versions of IE, but not in Firefox. I'm stuck.

<img alt="Loodgieters" title="Loodgieters" src="/core/loodgieters_uit.png" name="loodgieters"
border="0" style="margin-right:1px; margin-top:1px; float:left; cursor:pointer;"
onmouseover="foto1.style.backgroundColor='#392d63'; loodgieters.src='/core/loodgieters_aan.png'"
onmouseout ="foto1.style.backgroundColor='#008ac9'; loodgieters.src='/core/loodgieters_uit.png'" />

Explanation: element "loodgieters" is a menu button that should change on mouseover. It doesn't in FF, it does in IE.
Secondly, when you "mousover" the image, it should change the backgroundcolor of a second element (foto1).

Element 'foto1' is a table cell. In return, when you mouse-over this table cell, the image element 'loodgieters' should change as well. So it's a two-way thing. The code for the table cell is:

<td height="189" id="foto1" bgcolor="#008ac9" valign="top"
onmouseover="style.backgroundColor='#392d63'; loodgieters.src='/core/loodgieters_aan.png';"
onmouseout="style.backgroundColor='#008ac9'; loodgieters.src='/core/loodgieters_uit.png';"
<img alt="Loodgieters" title="Loodgieters" src="/core/loodgieters.png"
style="border:0; margin-left:auto; margin-right:auto; margin-top:10px; display: block;" /></td>

Again: it all works as I expected in IE, Safari and Chrome, but it does not in Firefox.

The whole page validates as XHTML 1.0 Transitional
What am I overlooking here? I'm stuck. Any help is welcome :)

Feb 10th, 2011, 12:26 PM
FYI: If there's something that works perfectly in IE and not in any standard browser, then there must be something wrong with your code.

In your case, you need to use the dom method document.getElementById() to refer that element using its id attribute.

Feb 10th, 2011, 12:46 PM
Thanks a lot! That was indeed the key to the solution :) It's working flawless now in every browser. You saved my day :)