PDA

View Full Version : Script works in IE, Safari, Chrome - and not in FF...



CodeALot
02-10-2011, 11:13 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;"
onclick="document.location='/pages/loodgieters.php';"
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';"
style="cursor:pointer;"
onclick="document.location='/pages/loodgieters.php';">
<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 :)