Transparent PNG image as hyperlink 1

[ZedEnter]

Hi -

Environment: IE 5.x and up-to-date Mozilla engines

I got the followinig problem. For some Link-Buttons I created a transparent png-picture. First thing. When you use transparent png-picture they will be still a gray background in IE 5.x . Solution: Use the AlphaImageLoader. Mozilla-browsers show a transparent png-picture by default right.
But here it comes. When you make this picture a hyperlink you have 2 different behaviours.
Behaviour in IE 5.x:
The png-Hyperlink works fine but the common link mouseover symbol (i.e. a "hand") doesn't show anymore.

Behaviour in mozilla-browers:
The png-Hyperlink works also fine and the link mouseover smybol does appear as it should be. But now you have an ugly "box" around your png picture which just ruins the transparent effect.

Does anybody know a solution to this problem just by setting the html tags right or do I have to program some JavaScript "simulation" for the mouseover-hand-symbol (forgive me for this expression) and some other JavaScript code to avoid the "box" in mozilla-browsers.


Greetz - ZedEnter

 

[ChrisHirst]

you can use CSS for both.

set border:0px; to remove the border and cursorointer; for the pointer cursor (hand-symbol by default)

Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[BillyRayPreachersSon]

Something like this:

<style type="text/css">
a img {
   border: 0px;
}
a, a img {
   cursor: pointer;
}
</style>

Hope this helps,
Dan

 

[ZedEnter]

Hi -

thx to both of you. The solution exactly fits my problem. ;-)

Greetz Chris