Firefox says "Error: event is not defined"

Hi Guys,

I have a problem on www.tludatasystems.com.ph (http://www.tludatasystems.com.ph).

I'm using a row of table cells as buttons and changing the button class onmouseover to create rollover effect. It works fine on IE6 but not in IE5 or in Firefox.

Fortunately, Firefox gives me the following hint as to the problem:

Error: event is not defined
Source File: http://www.tludatasystems.com.ph/
Line: 25

Here is a copy of the code:


<SCRIPT LANGUAGE="JavaScript" ID=code>
function testToggle() {
// Walk elements to see if user clicked in toggle button
var el = event.srcElement
while ((el.getAttribute("swap")==null) && (el.tagName!="BODY"))
el = el.parentElement
return el
}

function doSwapIt() {
var el = testToggle()
if (el.getAttribute("swap")!=null) {
// Check if contents need to be swapped
if (el.getAttribute("swap")!="") {
var temp = el.innerHTML;
el.innerHTML = el.getAttribute("swap")
el.setAttribute("swap", temp, false)
}
// Swap the style
el.className = (el.className=="over") ? "notover" : "over"
}
}

// Hook up event handlers
document.onmouseover = doSwapIt
document.onmouseout = doSwapIt
document.onclick = doSwapIt

</SCRIPT>


The symptom of the problem is that the table cells which are supposed to display as links are no longer links & there is no rollover effect :eek:

Can anyone spot the error in my code and help me fix it please as I'm useless at javascript!!

I appreciate all your help. Thanks.

Kindest regards

peter

I have made an emergency update on the site to enable (hopefully) all versions of IE to access it but without rollover effects temporarily.

Here is the relevant portions of the code that I'm trying to fix. (as they have now changed in the live site.

This appears in the header:

<SCRIPT LANGUAGE="JavaScript" ID=code>
function testToggle() {
// Walk elements to see if user clicked in toggle button
var el = event.srcElement
while ((el.getAttribute("swap")==null) && (el.tagName!="BODY"))
el = el.parentElement
return el
}

function doSwapIt() {
var el = testToggle()
if (el.getAttribute("swap")!=null) {
// Check if contents need to be swapped
if (el.getAttribute("swap")!="") {
var temp = el.innerHTML;
el.innerHTML = el.getAttribute("swap")
el.setAttribute("swap", temp, false)
}
// Swap the style
el.className = (el.className=="over") ? "notover" : "over"
}
}

// Hook up event handlers
document.onmouseover = doSwapIt
document.onmouseout = doSwapIt
document.onclick = doSwapIt

</SCRIPT>


and here is the area in the body containing the link:

<table width="702"
height="20"
border="1"
cellspacing="0"
cellpadding="0"
align="center"
bordercolor="#03086C">
<tr>
<a href="index.htm"
tabindex="1"
title="Introduction to TLU Data Systems, Inc.">
<td width="25%"
class="notover"
id="button1"
SWAP="">Home Page</td></a>

<a href="products.htm"
tabindex="2"
title="Products & Services of TLU Data Systems, Inc."><td width="25%"
class="notover"
id="button2"
SWAP="">Products & Services</td></a>

<a href="downloads.htm"
tabindex="3"
title="Downloads from TLU Data Systems, Inc."><td width="25%"
class="notover"
id="button3"
SWAP="">Downloads</td></a>

<a href="contact.htm"
tabindex="4"
title="How to contact TLU Data Systems, Inc."><td width="25%"
class="over"
id="button4"
SWAP="">Contact Details</td></a>
</tr>
</table>


The following is a copy of the relevant styles from the stylesheet:

.notover {
font-weight : normal ;
font-size : 12 ;
color : #ffffff ;
background-color : #03086C ;
text-align : center ;
vertical-align : middle ;
font-family : Arial, Helvetica, sans-serif ;
font-style : italic ;
cursor : hand ;
text-decoration : none;
}

.over {
font-weight : 900 ;
font-size : 14 ;
color : #03086C ;
text-align : center;
vertical-align : middle ;
font-family : Arial, Helvetica, sans-serif ;
font-style : italic ;
cursor : hand ;
text-decoration : none;
}


Hopefully this should make it easier for you to see what's going on, now you won't need to go hunting for the code!

Kind regards

Pete

Hi, I've been having the same problem and would really like to read the article mentioned above, however, I can't seem to find it at the site mentioned. Is there any chance you could copy and paste the final changes that need to be made to the code to make it work so I can have a look please?! Thanks. :)