.myimage a {
display:block;
text-indent:-99999px;

width:128px;
height:128px;

position:relative;
z-index:10;
}

128px are width and height of your image (div or whatever you use). Position:relative fixes the problem where you couln’t click on the “image”.

So in the end you have

My link

Hope this helps

With your solution, embedding the PNG 24 into the background means there’s nothing to click on to link to another page. I can see the graphic, but can’t click it.

And I can’t use the png itself or I’ll wind up with 2 images.

So I created a 1×1px transparent gif, that I can use in place of the png as the href linked element.

The .gif has been stretched out so it effectively covers the dimensions of the PNG that is embedded in the background with CSS. And you can click the .gif, which you never see, and it feels like your clicking on the PNG, and the effect is the same: you’re taken to the linked page.

However in IE6, wherever the .png 24 graphic exists, the .gif is not clickable. Only in the Alpha areas can I click and get the linked page.

Any ideas on how I can get this to do what I want?

#navMain a:hover, #navMain a.CMSListMenuLinkHighlighted
{
background:transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’/Assets/images/navMainOverArrow.png’, sizingMethod=’scale’);
}

Thanks anyway… on to the next method.

Also, you will have better success by referencing images absolutely, not relatively.

For example: use url(/images/truck.png) rather than url(../../images/truck.png)

or wherever your images live.