Question

I have a code block looking something like this:

<p class="cont">
 <a href="otherpage.php" class="link"><img src="test.jpg" alt="" width="100" height="100"/></a>
</p>

and I’ve got some CSS like this:

.cont {
  width:200px;
  height:200px;
}
.cont:hover {
  background-color:#CCC;
}

My question is, if it’s possible to change the size of the link area, so that it takes up the whole

area thus making it clickable – not only the image. I’ve tried giving width and height to the .link class and use display:block but it doesn’t do the trick. Is it even possible?

Answer 1

See: http://jsfiddle.net/sSGJV/
Or with 200px dimensions: http://jsfiddle.net/sSGJV/1/

HTML:

<a href="http://www.google.com/">
    <img src="http://www.google.com/images/logos/ps_logo2.png" />
    <br />
    Click to go to the Googles.
</a>

CSS:

a {
    display: block;
    border: 3px dashed #000;
    text-align: center
}

As you can see, you can click anywhere inside the <a> tag.