Opera mouseover/click detection problems

[Kolyana]

I've got a problem with Opera 8.0 and *ONLY* with Opera ... in IE 6, Netscape and Firefox things are working correctly.

I've got a table with multiple rows and columns. The final two columns contain images that can be clicked on for further information and so on (see below for an example), but there are two problems here.

1) The mouseover event does not fire if the user puts the cursor over the image (it doesn't bubble through the heirarchy at all).

2) The regular <a> tag on the image is not even clickable ... hovering the mouse over it does not change the cursor, the status bar does not recognize it as a link and it cannot be clicked.

In other cells I have link surrounding regular text and they work fine, so why is Opera ignoring the link on the image?

Why is opera not seeing the onmouseover event on the same cell?


<td align=left valign=middle
onmouseover="highlight(event, this);"
onmouseout="highlight(event, this);">
<a href="addtocart.asp?sid=AwNqixoL&paid=-32756&r=027373&pid=-32728&cid=-32758"
title="Add 000: Sample Spray, Nozzle, Handpump, BodyWash Formula to your shopping cart"
alt="Add 000: Sample Spray, Nozzle, Handpump, BodyWash Formula to your shopping cart">
<img src="images/cart-2.jpg" height=16 width=16 border=0
title="Add 000: Sample Spray, Nozzle, Handpump, BodyWash Formula to your shopping cart"
alt="Add 000: Sample Spray, Nozzle, Handpump, BodyWash Formula to your shopping cart">
</a>
</td>



I also have an issue with Opera with a mouseover on three floated images ... the mouseover event is only being recognized on the upperright corner of the final image (all three are in a row), and is not recognized on the other images or 2 thirds of the final image ... it's like the whole event area, even though it's assigned to an image, has been either masked, covered, displaced or otherwise shrunk and I'm not sure why or even how to approach the problem.


<div class=productImgContainer>
<img border=0 src="images/products/thumb_11.gif" height=85 width=100 id=img_0 class="border Active ">
</div>
<div class=productImgContainer>
<img border=0 src="images/products/cv-1000-1.gif" height=85 width=100 id=img_2 onmouseover="activateImg(event);" onmouseout="activateImg(event);" onclick="activateImg(event);" class="border notActive hasParent">
</div>
<div class=productImgContainer>
<img border=0 src="images/products/cv-1000-2.gif" height=85 width=100 id=img_4 onmouseover="activateImg(event);" onmouseout="activateImg(event);" onclick="activateImg(event);" class="border notActive hasParent">
</div>


In this code example, the detection area is a small, small part of the final image's top-right corner ... the onclick routine doesn't fire at all and the mouseover fails elsewhere.

I've searched the internet intently but found no bugs related to this for Opera ... what am I missing?

~ Natalya

[Kor]

do you need to capture the event by all means? can't you simply onmouseover="afunction(this)"...?

[Kolyana]

You're talking about the "onmouseover=dothis(event);"? Well I'm only doing that so I can use the same function, which essentially does the same thing - toggles opacity and (for ie) the gray filter. I know that these don't work in Opera, but when I stripped this function down to just show an alert, Opera only kicked on when the mouse was over - or moved out of - a small square area in the top right corner. I therefore concluded that it wasn't the function at fault, but the function simply wasn't being called.

If there's a better way to call this, or you feel that capturing the event is a problem in Opera, I'd love to hear alternatives!


EDIT:
Further to my Opera woes, none of the links in this html (in Opera) work ... none of them are 'clickable'. :?:



<table cellpadding=2 cellspacing=0 border=0 style="margin-left: 10px;">
<colgroup>
<col width=50% />
<col width=50% />
</colgroup>
<tbody>
<tr>
<td colspan=2 align=center valign=middle height=103>
<a href="package_detail.asp?sid=AwNqixoL&paid=-32768&r=084324&cid=-32758&pid=-32758" id=packageLink
title="View May 2005: CV-1000 "
alt="View May 2005: CV-1000 ">
<img src="images/products/noimage_sm.jpg"
height=90
width=140
border=0 class=border id=packageImage>
</a>

</td>
</tr>
<tr>
<td colspan=2 align=center id=packageText>
<a href="package_detail.asp?sid=AwNqixoL&paid=-32768&r=084324&cid=-32758&pid=-32758" id=packageText_link
title="View May 2005: CV-1000 "
alt="View May 2005: CV-1000 "><span class=bold>CV-1000</span> Package <span class=bold>May 2005</span></a>
</td>
</tr>

<tr>
<td colspan=2 align=left id=packageDesc>
1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla arcu dolor, varius aliquam, sagittis vel, pharetra eget, nibh. Sed suscipit sodales ante. Suspendisse potenti. Fusce suscipit, lacus quis ultricies accumsan
</td>
</tr>

<tr>
<td align=right style="padding: 0 25px 0 0;">
<a href="package_detail.asp?sid=AwNqixoL&paid=-32768&r=084324&cid=-32758&pid=-32758" id=packageView_link
title="View May 2005: CV-1000 "
alt="View May 2005: CV-1000 ">View</a>
</td>
<td align=left style="padding: 0 0 0 5px;">
<a href="addtocart.asp?sid=AwNqixoL&paid=-32768&r=064029&cid=-32758&pid=-32758" id=packageCart_link
title="Add May 2005: CV-1000 to your shopping cart"
alt="Add May 2005: CV-1000 to your shopping cart">Add to Cart</a>

</td>
</tr>


</tbody>
</table>