webmatze.de

Profi Tipps für einen erfolgreichen Internetauftritt

Kittyfier Bookmarklet – Süße Kätzchen überall

| 1 Kommentar

Was passiert, wenn man sich als Programmierer mal etwas vom normalen Arbeitsstress ablenken will? Man programmiert etwas, dass Spaß macht.

Auf genau diese Weise ist auch dieses Bookmarklet entstanden. Es wandelt einfach alle per IMG HTML-Tag eingebundene Bilder einer Seite in Bilder mit niedlichen kleinen Katzen um. Um zu sehen, was es macht, einfach den folgenden Link in die Bookmark-Leiste eures Browsers ziehen und auf einer beliebigen Seite mit Bildern ausprobieren!

Wer es gleich hier auf dieser Seite testen möchte, kann auch einfach nur den Link anklicken.

Hier sind ein paar zufällige Bilder zum Testen.

Flowersflowers and bokehMacro flower experimentFire-tree flower oppening, Tulipa africana, bisnagueira (Spathodea campanulata). Ceret park São Paulo Brasil. African native

Wer wissen möchte, wie das Kittyfier Bookmarklet funktioniert, kann sich den kompletten Code hier ansehen. Eigentlich nichts besonderes:

  1. var images = document.images;
  2. var icount = 0;
  3. for(var i = 0; i < images.length; i++) {
  4. var img = images.item(i);
  5. if (img.width > 20 && img.height > 20) {
  6. img.src = "http://placekitten.com/"+img.width+"/"+img.height+"?image="+icount;
  7. icount++;if(icount > 16){icount=0;}
  8. }
  9. }

Wie man sehen kann, verwende ich den Placekitten Service, welcher es einem erlaubt durch Angabe von Höhe und Breite beliebig große Katzenbilder zu generieren um diese als Platzhalter in die eigenen Entwürfe einzubauen. Dies ist vor allem dann praktisch, wenn man nur mal schnell ein HTML Layout testen möchte, aber noch keine passenden Bilder hat.

Ich hoffe ihr habt Spaß an diesem kleinen Script und ich freue mich über eure Kommentare.

Diese Artikel könnten dich auch interessieren: