Kann man in HTML/CSS ein .png Bild so ausgeben, dass nur der nicht-transparente Teil als Link funktioniert?
Ich habe ein Logo mit einem transparenten Hintergrund, ich benutze es als Link zur meinem Index. Jetzt stört es mich aber, dass auch der transparente Hintergrund auch als Link funktioniert. Kann ich das irgendwie ausschalten? Danke schon mal für alle Antworten!
Lg BTK
5 Antworten
Das ist leider nicht möglich. Wenn auf dieses Detail großer Wert gelegt wird, könnte höchstens mit einer image-map gearbeitet werden um den interaktiven Bereich der Grafik einzugrenzen.
Neben der bisher empfohlenen ImageMap könntest du es auch mit JavaScript und Canvas probieren.
Allerdings dürfte eine ImageMap wesentlich leichter (wenn auch etwas ungenauer) umzusetzen sein. :)
Hilft dir das in irgend einer Form weiter?
Clipping https://css-tricks.com/clipping-masking-css/
Dort sieht man das mit dem Link nicht aber wenn man es einbaut dann klappt es (zumindest bei mir mit Opera 37) , nur der sichtbare Bereich der Grafik ist anklickbar.
Ok sorry mask-image scheint nur optisch zu sein, es ist wohl immer noch ein rechteckiger Bereich anklickbar.
Ah vielleicht hilft dir das weiter:
mask-image: url(YOUR.png),
Oder dieser Artikel scroll mal runter zu den Bildern: http://www.html5rocks.com/en/tutorials/masking/adobe/
Allerdings habe ich keine Möglichkeit gefunden für den Pfad ein PNG zu nutzen, geht wohl nur mit SVG https://css-tricks.com/almanac/properties/c/clip/
Doch, richtig "Old School" mit Imagemaps:
Nein, gewoehn dich dran :)