How to hyperlink an image from CSS?

[MLpez]

How to hyperlink a whole table cell that has only a background picture loaded via a CSS rule.
For example, I have following:
<td class=HOME_TD width="150" height="150" ></td>
HOME_TD is the rule that loads the picture representing "home"
So I tried selecting the whole tag in Dreamweaver and set a link but the resulting code does not show any hyperlink.
<td class=HOME_TD width="150" height="150" ><a href="../index.htm"></a></td>

Can you load a picture and hyperlink it all in CSS?

I thought about overlaying a 150x150 transparent GIF but this would be overkill and may not work in all browsers.

Thank you for any thoughts.

[D_Blackwell]

Does it need to be a background-image? Could you just use <img>, and link that?

Or you can just fill up the cell with one big link this way:
<td>
<a href="" style="display: block; width: 150px; height: 150px;">
</a>
</td>

[MLpez]

No it does not have to be a background image.
My goal is just to have some CSS code that allows me to write something like
<td class=HOME_TD></td>
[I am new to CSS, I still can't tell when to use id or class :) ]
and which will a) load some home picture b) link it to say "/" is this possible in CSS?

Your solution works except:
1) I am getting a hover color which I don't know how to turn off for this instance of href only?

2) How to implement your solution from CSS?

Thank you.

[Stormfx]

First off, you can't link from CSS. That has to be hard-coded into the HTML. As with the image, that has to be either coded into the HTML, or set as a background via CSS.

The difference between classes and ids is that ids tend to be more effecient. They load a tad faster because the browser only has to apply it to one element. Ids can only be attached to one item. Classes can be attached to any number of elements. And the elements can have multiple classes by seperating them with a space.

Hope that helps.

[MLpez]

No linking from CSS! that's too bad :( it sure would be useful.

How do I turn off the effect of a:hover{background-color: #D6EEA0;} just for the following instance

<td>
<a href="" style="display: block; width: 150px; height: 150px;">
</a>
</td>
I tried adding something like background-color: #?; to the inline style above but it did not seem to work and I have no idea how to express none for color :)

I just want to see the hand pointer, right now the whole picture is getting covered with the bg color.
Thank you.

[benihana]

No linking from CSS! that's too bad it sure would be useful.

not really. CSS is for presentation. a link is part of a pages structure, and as such (X)HTML is the way to do it.