Frage von 42BTK42, 51

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

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Limearts, 33

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.

Antwort
von fluffiknuffi2, 21

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.

Kommentar von fluffiknuffi2 ,

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/

Kommentar von fluffiknuffi2 ,

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/

Kommentar von fluffiknuffi2 ,

Ok sorry mask-image scheint nur optisch zu sein, es ist wohl immer noch ein rechteckiger Bereich anklickbar.

Antwort
von TeeTier, 29

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. :)

Antwort
von Steffile, 34

Nein, gewoehn dich dran :)

Antwort
von MonkeyKing, 15

Doch, richtig "Old School" mit Imagemaps:

http://www.w3schools.com/tags/tag\_map.asp

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten