Besonders in shops, bei denen es viele Produktbilder gibt, wäre es wünschenswert, wenn jedes Produktbild zusätzlich ein kleines Icon enthalten könnte, welches zum Draufklicken auffordert oder welches das Logo des Unternehmens enthält. Eine einfache Lösung kann sein hier die Stapelverarbeitung von z.B. Corel Photopaint zu nutzen und einfach in jedes Bild automatisch und per Makro ein solches Bild einfügen zu lassen. Manchmal jedoch ist das nicht sinnvoll. Moderne ImageResizer Programme, die in shop-Software-Lösungen integriert sein können, arbeiten jedoch nicht mehr mit einem Wust von Produktbildern in allen möglichen Formaten, sondern benötigen nur noch 1 Ausgangsbild. Je nachdem ob dieses Bild als Thumbnail, Mini-Thumbnail oder großes Produktbild angezeigt werden soll, werden nur noch bestimmte Größenzustände von dem Bild generiert, die aber nicht als Bild in einem festen Format abgespeichert werden. Um jedoch auch solchen oder eben auch anderen Bildern dennoch ein Icon oder ein Logo zu verpassen, kann (könnte) man mit CSS und ein bisschen Javascript arbeiten.
Designer und Webdeveloper Alen Grakalic vom CSS Globe Blog (Thanks to Alen!) stellt hierzu eine Möglichkeit vor, die mit (unobstrusive) Javascript und einer span Klasse ein Bild über das eigentliche Foto legt. Das Skript geht durch den Quellcode und sucht alle Bilder innerhalb von Anker-Tags – Bilderlinks also. Es erstellt dann ein span-Element, welches über dem eigentlichen Bild absolut positioniert wird und welchem man dann per .css ein Hintergrundbild mit besagtem Icon zuweist.
Wirklich ein gelungenes Beispiel von Alen. Danke für den LipTipp!