3 replies [Last post]
abeall
Offline
newbie
Last seen: 11 years 37 weeks ago
Joined: 2005-09-24
Posts: 10
Points: 0

Here's what I have:

<a href="[snipped]"><img src="/media/layout/bttn_buynow.gif" border="0" alt="Buy Now" width="64" height="13" onMouseOver="src='/media/layout/bttn_buynow.over.gif'" onMouseOut="src='/media/layout/bttn_buynow.gif'"/></a>

The problem is, the <a> tag pics up mouse interaction outside of the 64x13 area. In other words, as you move over the button, the default a:hover appears, then you move a little closer and the image swaps. The <a> is picking up hit area outside the image dimensions.

Any solution?

It appears to only do this on Mozilla/Netscape

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

&lt;a&gt; around &lt;img&gt; creating bad link

Hi

Without a link to work with, where we can see the code in action, I suspect you haven't given us enough to work with. Why?

Coz I built a bare page with just the code you described, with 2 buttons I made, and can see no problems. Both images change on mouseover only when the cursor is over the images.

It maybe that, if the problem is with FF, that it is inheriting a padding to the image.

As a principal, this mouseover method is not ideal. Take a gander at pmob.co.uk for better methods.

Trevor

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

&lt;a&gt; around &lt;img&gt; creating bad link

Have you padded the anchors?

abeall
Offline
newbie
Last seen: 11 years 37 weeks ago
Joined: 2005-09-24
Posts: 10
Points: 0

&lt;a&gt; around &lt;img&gt; creating bad link

Thank-you both.

There should be no padding.

I did not show the actual page because it is not live, otherwise I would certainly have shown it. Many apologies.

I mostly solved the problem by switching over to CSS:

#BuyNow,#BuyNow:link,#BuyNow:active{ background:url(/media/layout/bttn_buynow.gif) no-repeat center; }
#BuyNow:hover,#BuyNow:active{ background:url(/media/layout/bttn_buynow.over.gif) no-repeat center; }

<a id="BuyNow" href="[snipped]"><img height="13" width="64" border="0" src="/media/layout/spacer.gif" alt="Buy Now" /></a>

There seems to still be a little extra padding around the <a> tag, but at least now it looks correct, and even though the hitArea is a little big it otherwise interacts correctly.

I will definately bookmark pmob, it will be very handy for future use!