Question

I am trying to create a transparent link which sits over an image (a bit like an image map) but for some reason I can not get the link to have a fixed height and width unless I give it a background color. This isn’t ideal because it will cover up the image!

Unfortunately, giving the link a background color and setting the opacity to 0 clashes with a jquery animation so I can not do this either.

Any ideas how I can get around this?

html

<a class="testlink" href="link.html">&nbsp;</a>

css

.testlink {
    position:absolute; 
    top:78px; 
    left:0px; 
    text-decoration:none; 
    display:block; 
    width:275px; 
    height:200px; 
    /* background-color:#333; inserting this into the styles give the link a width/height */
}

Answer 1

You could use a transparent 1×1 PNG as the background, if you don’t want to use external images you could embed it in the CSS with base64-encoding