In IE geen transparantie-effect

Door Rene Wennekes op 26-10-2008 18:08

285 views

Op http://home.kpn.nl/r.wennekes4/fotoalbum.htm heb ik ingesteld dat zodra over een link gehoverd wordt er een effectje plaatsvind op de image.

zie hieronder css:
A.imglink {border: 0px solid #000000; padding: 0px; margin: 0px;}
A.imglink:hover {opacity: 0.50; filter: alpha(opacity=50);}

IMG.imglink {border: 1px solid #666666;}

Echter bij IE schijnt het niet te werken.
Iemand die weet wat ik fout doe?

Lode

26-10-2008 19:26

Opacity werkt anders in verschillende browsers.
Een cross browser css class voor opacity zal er zo iets uitzien.

.opacity50{
-khtml-opacity:.50;
-moz-opacity:.50;
-ms-filter:"alpha(opacity=50)";
filter:alpha(opacity=50);
opacity:.50;
}

Rene Wennekes

26-10-2008 19:39

Veranderd in
A.imglink {border: 0px solid #000000; padding: 0px; margin: 0px;}
A.imglink:hover {opacity: 0.50; filter: alpha(opacity=50);
-khtml-opacity:.50;
-moz-opacity:.50;
-ms-filter:"alpha(opacity=50)";
filter:alpha(opacity=50);
opacity:.50;
}

werkt nog steeds niet ?!?

Nick

26-10-2008 19:43


A.imglink {border: 0px solid #000000; padding: 0px; margin: 0px;}
A.imglink:hover {opacity: 0.50;
-khtml-opacity:.50;
-moz-opacity:.50;
-ms-filter:"alpha(opacity=50)";
filter:alpha(opacity=50);
opacity:.50;
}

je had
filter: alpha(opacity=50); er twee keer instaan

Rene Wennekes

26-10-2008 19:50

Het laatste geheel overgenomen. Werkt nog steeds niet in IE6.
Ook de cache van ie leegemaakt.

Jan Koehoorn

26-10-2008 20:00

IE6 ondersteunt helemaal geen transparantie via CSS. Daar zul je een truc moeten uithalen:


<!--[if lte IE 6]>
<style type="text/css" media="screen">
	a.imglink {
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent.png',sizingMethod='scale');
	}
</style>
<![endif]-->

Edit: in dit voorbeeld ga ik ervan uit dat je een plaatje transparent.png in de map gfx geupload hebt.

Rene Wennekes

26-10-2008 20:17

Het probleem ligt hem dat het alleen bij <IMG> niet werkt.
De pull-down menu werkt wel transparant in IE6. Dit is uiteraard <div>

Lode

26-10-2008 22:07

IE6... echt museum spul...

Niek Weevers

26-10-2008 22:20

Jan je hebt niet helemaal gelijk. Transparantie met css werkt wel in ie6. Ie6 heeft geen ondersteuning voor transparantie in png afbeeldingen.
Wat het probleem van de topicstarter is, is denk ik dat hij de transparantie in de a-tag zet. Ik zou deze eigenschap op de img zetten.

Rene Wennekes

26-10-2008 22:31

Maar dan moet ik er zeker Javascript bij halen?
Of hoe doe ik dan dat het plaatje donkerder wordt bij mouse-over?

Niek Weevers

27-10-2008 08:20

met css. Is het een vaste afbeelding? Of beheerbaar?
ALs het vast is, dan kun je het beste afbeeldingen gebruiken. In photoshop al lichter maken, en dan met behulp van css bij een hover een andere inladen.
Nog beter is het met een sprite. Deze manier is het snelste

Reageren

Inloggen om te reageren