Problem with hyperlinked image centered in div

[JEEZUSwuzaHIPPIE]

So I have a hyperlinked image that is horizontally centered within a
div:

<div class="product">
<a href="http://foobar.com/"><img class="sample" src="product.jpg" /></
a>
</div>

Using the following CSS:

div.product {
width: 300px;
}

img.sample {
display: block;
margin: auto;
border: none;
}

The image is centered, but there is one problem: the hyperlink applies
to the entire area of the div, not just the image. So if I move my
mouse over to any region in the div, the cursor turns into the
pointing hand, and if I click anywhere within the div (again, not just
on the image), the URL opens up.

Any ideas on what to do?

[dorayme]

In article
<820819c6-08ce-4d6f...@j24g2000yqa.googlegroups.com>,
JEEZUSwuzaHIPPIE <bro...@gmail.com> wrote:

If you don't *need* the image to be blocked, much simpler is:

div.product {
width: 300px;
text-align: center;
}

with

<div class="product">
<a href="http://foobar.com/"><img src="pics/crimson.png"></a>
</div>

But if you do need it to be blocked, then say and I will go on.

--
dorayme

[JEEZUSwuzaHIPPIE]

I don't need the image to be blocked. Thank you, that worked
perfectly.

On Nov 5, 7:46 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <820819c6-08ce-4d6f-808f-36ed9829b...@j24g2000yqa.googlegroups.com>,