Links auf PNG mit AlphaImageLoader klickbar machen

Das Bildformat PNG ist prinzipiell eine sehr schöne Sache für Webentwickler, da man damit Transparenzen weit besser wie mit GIF darstellen kann. Problem dabei ist allerdings, dass der IE momentan noch keine transparenten PNGs unterstützt.

Um dies dennoch zu bewerkstelligen bietet der IE den AlphaImageLoader mit dessen Hilfe sich die transparenten PNGs laden lassen.

filter:progid:DXImageTransform.Microsoft.
  AlphaImageLoader(src=’bildname.png', sizingMethod='crop')

Allerdings ensteht dabei ein merkwürdiges Probelm: Links die sich im Vordergrund des PNGs befinden sind zwar noch sichtbar aber nicht mehr klickbar.

Aufgrund dessen, dass ich unter Portfolio eine unsortierte Liste als quasi Imagemap benutze kam ich auf die Idee den Links auf der Seite zusätzlich

position:relative

zuzuweisen und siehe da… die Links sind wieder klickbar :)

Vielleicht hilft es ja dem ein oder anderen.

danke, das hat es :o)

Jo… da war ich doch gerade fast am Verzweifeln… und das ist es! Danke Dir für den Tipp !!

Jippie! :) – Danke für den Tipp. Ohne den hätte ich jetzt sicher noch ein paar Stunden dagesessen und hätte mir selbst was seltsames einfallen lassen müssen *g*

wir hat’s auch geholfen. dank dir!

Guter Tipp, danke!

Bei mir sind im IE6 nicht nur die Links nicht klickbar, sondern auch Eingabefelder. Man kann aber mit der Tastatur reintabben.
Mit position:relative sind die Felder auch wieder klickbar.

Sobald aber noch ein absolut positioniertes DIV mit Alpha-Transparentem Hintergrund über dem ersten liegt, nützt auch ein position:relative nichts mehr. Die Links und Eingabefelder sind nicht mehr mit der Maus klickbar.

Vielleicht findet ja jemandem noch eine andere Lösung.

Schade, bei mir schieben sich alle angesprochenen li’s an die oberste Stelle und wenn ich nicht nur dem “li a” ein position:relative gebe sondern dem “li” auch, dann sind zwar alle wieder an der richtigen Stelle aber der Link funktioniert nicht mehr. Weiß einfach nicht weiter…
Trotzdem vielen Dank!

Hallo,

danke für den Hinweis, aber wie kann ich png’s im ie6 darstellen die als background in einem td seien sollen?

Mfg

Niels

Es ist ganz einfach auch die Links wieder klickbar zu machen, wenn ein absolut ausgerichteter DIV gewünscht wird. Der Layer dem du die PNG als Hintergrundgrafik zuweist, der muss relative positioniert werden und zwar innerhalb eines absolut positionierten DIV, der wiederum deine Positionsangaben enthält. Dann bekommt deine CSS einfach nur noch ein Zeilchen:

#dein_png_container_mit_png_hgbild a { position:relative; z-index:1000; }

und schon hat man in einem absolut positioniertem DIV einem funktionierenden Link, trotz PNG Fix ;o) .. Da sind wir zwar wieder beim “verschachteln” von DIV-Layern, aber was solls, die alten IE’S sterben aus.

Firefox rules ;) … Danke es hat prima geklappt!!