Problem with hyperlinked image centered in div

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?

In article
<820819c6-08ce-4d6f-808f-36ed9829bdc5 (AT) j24g2000yqa (DOT) googlegroups.com>,
JEEZUSwuzaHIPPIE <brookjs (AT) gmail (DOT) com> wrote:

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?

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

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

On Nov 5, 7:46*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
820819c6-08ce-4d6f-808f-36ed9829b... (AT) j24g2000yqa (DOT) googlegroups.com>,



*JEEZUSwuzaHIPPIE <broo... (AT) gmail (DOT) com> wrote:
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?

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