Hi,
I read somewhere that 'onmouseover' & 'onmousedown' will be deprecated, so I decided to change for CSS event.
I built a menu with images that I want to change everytime the mouse is over or the mouse down. I don't know why but sometime the mousedown is working... sometime it is NOT!
The active / focus events are not working everytime!!
Here is some of my code:
**************************
**********
*********
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<STYLE TYPE="text/css"><!--
.mainbar TD {
background-image:url('../i
mages/main
bar.gif');
background-color:#006699;
height: 32px;
}
* html a:hover {visibility:visible}
.menu {display: block; height:32px; background-repeat:no-repea
t; background-color:transpare
nt; position:relative; margin:0; padding:0;}
.menu#menu1 {width:100px; background-image:url(image
s/homeB.gi
f);}
.menu#menu2 {width:111px; background-image:url(image
s/products
B.gif);}
.menu#menu3 {width:112px; background-image:url(image
s/supportB
.gif);}
.menu#menu4 {width:130px; background-image:url(image
s/companyB
.gif);}
.menu a {display: block; height:32px;}
.menu#menu1 a {width:100px;}
.menu#menu2 a {width:111px;}
.menu#menu3 a {width:112px;}
.menu#menu4 a {width:130px;}
.menu#menu1 img {width: 100px; height: 32px; }
.menu#menu2 img {width: 111px; height: 32px; }
.menu#menu3 img {width: 112px; height: 32px; }
.menu#menu4 img {width: 130px; height: 32px; }
.menu a:hover img {display:none;}
.menu#menu1 a:active, .menu#menu1 a:focus {background-image:url(imag
es/homeC.g
if);}
.menu#menu2 a:active, .menu#menu2 a:focus {background-image:url(imag
es/product
sC.gif);}
.menu#menu3 a:active, .menu#menu3 a:focus {background-image:url(imag
es/support
C.gif);}
.menu#menu4 a:active, .menu#menu4 a:focus {background-image:url(imag
es/company
C.gif);}
--></STYLE>
</head>
<body MS_POSITIONING="GridLayout
" topmargin="0" leftmargin="0">
<TABLE id="Table2" class="mainbar" cellSpacing="0" cellPadding="0" width="800" border="0">
<TR>
<TD><div id="menu1" class="menu"><a href="#"><img name="imgHome" alt="" src="images/homeA.gif"></a
></div>
</TD>
<TD><div id="menu2" class="menu"><a href="#"><img name="imgProducts" alt="" src="images/productsA.gif"
></a></div
>
</TD>
<TD><div id="menu3" class="menu"><a href="#"><img name="imgSupport" alt="" src="images/supportA.gif">
</a></div>
</TD>
<TD><div id="menu4" class="menu"><a href="#"><img name="imgCompany" alt="" src="images/companyA.gif">
</a></div>
</TD>
<TD style="width:100%"> <
/TD>
</TR>
</TABLE>
</body>
</html>
**************************
**********
*********
What is wrong with this code!!!
Can someone help me?