{"id":3652,"date":"2008-07-04T10:55:28","date_gmt":"2008-07-04T08:55:28","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/2008\/07\/04\/kleine-icons-in-bilder-mit-css-einfugen\/"},"modified":"2017-12-03T11:06:38","modified_gmt":"2017-12-03T09:06:38","slug":"kleine-icons-in-bilder-mit-css-einfugen","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2008\/07\/kleine-icons-in-bilder-mit-css-einfugen\/","title":{"rendered":"Kleine Icons in Bilder mit CSS einf\u00fcgen"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/07\/iconize-images.jpg\" class=\"img img3\" alt=\"iconize-images.jpg\" \/>Besonders in shops, bei denen es viele Produktbilder gibt, w\u00e4re es w\u00fcnschenswert, wenn jedes Produktbild zus\u00e4tzlich ein kleines Icon enthalten k\u00f6nnte, welches zum Draufklicken auffordert oder welches das Logo des Unternehmens enth\u00e4lt. Eine einfache L\u00f6sung 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\u00fcgen zu lassen. Manchmal jedoch ist das nicht sinnvoll. Moderne ImageResizer Programme, die in shop-Software-L\u00f6sungen integriert sein k\u00f6nnen, arbeiten jedoch nicht mehr mit einem Wust von Produktbildern in allen m\u00f6glichen Formaten, sondern ben\u00f6tigen nur noch 1 Ausgangsbild. Je nachdem ob dieses Bild als Thumbnail, Mini-Thumbnail oder gro\u00dfes Produktbild angezeigt werden soll,  werden nur noch bestimmte Gr\u00f6\u00dfenzust\u00e4nde 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\u00f6nnte) man mit CSS und ein bisschen Javascript arbeiten.<\/p>\n<p><a href=\"http:\/\/www.cssglobe.com\/\">Designer und Webdeveloper Alen Grakalic vom CSS Globe Blog<\/a>  (Thanks to Alen!) stellt hierzu eine M\u00f6glichkeit vor, die mit (unobstrusive) Javascript und einer span Klasse ein Bild \u00fcber das eigentliche Foto legt. Das Skript geht durch den Quellcode und sucht alle Bilder innerhalb von Anker-Tags &#8211; Bilderlinks also. Es erstellt dann ein span-Element, welches \u00fcber dem eigentlichen Bild absolut positioniert wird und welchem man dann per .css ein Hintergrundbild mit besagtem Icon zuweist.<\/p>\n<p><a href=\"http:\/\/www.cssglobe.com\/post\/1238\/style-your-image-links\">Artikel auf CSS Globe besuchen <\/a><br \/>\n<a href=\"http:\/\/cssglobe.com\/lab\/imagelink\/\">Demo &#8211; Beispiele  anschauen<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Besonders in shops, bei denen es viele Produktbilder gibt, w\u00e4re es w\u00fcnschenswert, wenn jedes Produktbild zus\u00e4tzlich ein kleines Icon enthalten k\u00f6nnte, welches zum Draufklicken auffordert oder welches das Logo des Unternehmens enth\u00e4lt. Eine einfache L\u00f6sung kann sein hier die Stapelverarbeitung von z.B. Corel Photopaint zu nutzen und einfach in jedes Bild automatisch und per Makro  &#8230; <a title=\"Kleine Icons in Bilder mit CSS einf\u00fcgen\" class=\"read-more\" href=\"https:\/\/www.jukemedia.de\/blog\/2008\/07\/kleine-icons-in-bilder-mit-css-einfugen\/\" aria-label=\"Mehr Informationen \u00fcber Kleine Icons in Bilder mit CSS einf\u00fcgen\">Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[177,225],"yst_prominent_words":[],"class_list":["post-3652","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-tipps-und-tricks","tag-webdesgin"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=3652"}],"version-history":[{"count":1,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3652\/revisions"}],"predecessor-version":[{"id":4035,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3652\/revisions\/4035"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=3652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=3652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=3652"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=3652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}