how to make an image into a link - html

Question

I have a simple question which I can't seem to solve.
#tps_block {
height: 45px;
width: 940px;
}
#tps_point1 {
width: 351px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point1:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") 0 -45px no-repeat;
}
#tps_point2 {
width: 284px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point2:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -351px -45px no-repeat;
}
#tps_point3 {
width: 305px;
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px 0 no-repeat;
text-indent: -9999px;
display: block;
height: 100%;
float: left;
}
#tps_point3:hover {
background: url("http://www.jenierteas.com/templates/default/images/hp_usp.png") -677px -45px no-repeat;
}
<div id="tps_block">
<div id="tps_point1">Point 1
</div>
<div id="tps_point2">Point 2
</div>
<div id="tps_point3">Point 3
</div>
</div>
The idea is that there are 3 images side by side, and when the mouse hover's over each image, the image changes to a highlighted one, and the image is clickable too, so that the user is taken to some other place when the image is clicked.
I have managed to apply the hover effect, but I can't get the linking to work.
Can someone help me out ?
JSFiddle: http://jsfiddle.net/ahmadka/Fjmnt/

Answer 1

If you're able to change the HTML, just lose the inner div tags and apply exactly the same styles to the links themselves:
<div id="tps_block">
Point 1
Point 2
Point 3
</div>
Updated jsFiddle: http://jsfiddle.net/Fjmnt/7/

Answer 2

Best solution if you are unable to modify the HTML.. add the following CSS.
#tps_block a {
display: block;
width: 100%;
height: 100%;
}
This will fill <a> making the entire div clickable.
jsFiddle demo

Answer 3

<div id="tps_block">
<div id="tps_point1"></div>
<div id="tps_point2"></div>
<div id="tps_point3"></div>
</div>