nicht angemeldet
AlphaImageLoader mit Alphakanal und Links
Hallo Forum,
Ich habe hier mal ein wenig gesucht, aber eine Lösung zu dem Problem schien mir noch nicht gepostet worden zu sein und irgendwie kann ich im Archiv auch nicht antworten (Wahrscheinlich so gewollt ;)
Also, das Problem betrifft den IE
Der IE hat ja von Haus aus keinen Support für PNGs mit Alphakanal, da gibt es dann den Workaround mit dem DirectX-Filter AlphaImageLoader
<code>
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='some.alpha.png');width:100px;height:100px">
<!-- some content --></div>
</code>
Das ist ein Workaround der im IE ab 5.5 funktionieren sollte und ich glaube im IE7 aber nicht mehr nötig ist, da der Alpha-PNGs unterstützt (straft mich Lügen, sollte ich da falsch liegen).
Jetzt taucht aber ein Problem auf, dass der DirectX-Filter anscheinend die aktive link-sensitive überlagert und Links im DIV-Container nicht mehr funktionieren.
<code>
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='some.alpha.png');width:100px;height:100px">
<a href="will-not-work.html"></div>
</code>
Es gibt im Netz zahlreiche Workarounds, die aber alle für mich nicht zufrieden stellend sind, wie Beschränkung auf PNGs bestimmter Größe etc.
Deswegen habe ich ein wenig getestet und bin zu folgender Lösung gekommen.
<code>
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='some.alpha.png');width:100px;height:100px">
<p style="position:relative; margin:0px; padding:0px"><a href="will-not-work.html"></p></div>
</code>
Der Link wird in einen Paragraphen eingebaut, der ein position-Style-Attribut beinhaltet (der DIV darf glaube ich kein position haben). Die margin und padding Angaben sind dafür da, dass das Layout nicht zerstört wird.
Wenn man das ganze dann ncoh class-basiert macht (was ich euch allen zutrauen :D), dann sollte das klappen, auch wenn der Link etwas träge reagiert, weil der DirectX-Filter irgendwie Resourcen klaut oder so.
Könntet Ihr vielleicht verifizieren, ob dieser Hack funktioniert, insbesondere auch im IE6, bitte???
HerrSerker
-
So könnte eine vollständige Lösung mit Browser-Weichen etc. aussehen
<html>
<head>
<style type="text/css">
.alphahack {
position:relative;
margin:0px;
padding:0px;
}#alphapng {
background:url('path-relative-to-css-file/some-alpha.png');
width:100px;
height:100px;
}* #alphapng { /*Hack für IE */
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path-relative-to-html-file/some-alpha.png');
}
</style>
</head>
<body>
<div id="alphapng">
<p class="alphahack"><a href="will-probably-work.html"></p></div>
</code> -
Hallo,
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='some.alpha.png');width:100px;height:100px">
<p style="position:relative; margin:0px; padding:0px"><a href="will-not-work.html"></p></div>scheint zu funktionieren. Es geht sogar noch simpler.
a {position:relative;} spart den zusätzlichen Container.Könntet Ihr vielleicht verifizieren, ob dieser Hack funktioniert, insbesondere auch im IE6
Mein IE6.0 XP-SP2 tut.
Grüße,
Jochen
-
Hallo,
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='some.alpha.png');width:100px;height:100px">
<p style="position:relative; margin:0px; padding:0px"><a href="will-not-work.html"></p></div>scheint zu funktionieren. Es geht sogar noch simpler.
a {position:relative;} spart den zusätzlichen Container.Den P-Container habe ich eingebaut, um vielleicht nicht jedes a mit dem position-style auszustatten, wenn man vielleicht eine andere position haben will, aber eigentlich hast Du recht, denn was in der position drin steht, ist egal, hauptsache man hat eine Position.
Jetzt könnte es aber noch sein, dass der zusätzliche P-Container nötig ist, wenn der umliegende div-Container AUCH eine position-Angabe hat. Müsste ich mal schauen
-