swfir – Bilder dynamisch manipulieren

In eine ähnliche Richtung wie die hier beschriebenen „Rounded corners“-JS Libs geht auch swfir. Über JS und Flash kann man damit dynamisch Bilder auf Websites manipulieren. Abgerundete Ecken, Schatten, Ränder oder einfach nur Bilder drehen sind damit kein Problem.

Einfach das swfir Script im Header integrieren und sagen, welche Elemente wie verändert werden sollen. Getestet hab ich diesen Ansatz auf IE6 und 7, Firefox sowie unter Safari. In allen Browsern hat’s ohne Probleme geklappt. Also merken und bei Gelegenheit mal richtig Zeit sparen :-)

2 Comments

  1. Hey,

    sag mal, wie bekomme ich das ganze bei einer WordPress-Installation zum laufen. Hätte ja am liebsten, dass alle in Beiträgen eingefügte Bilder sich so verhalten.
    Habe nur leider nach dem Download keine Ahnung, wo ich die js hinkopieren und wo was einfügen soll…

    Kannst Du da etwas helfen?
    Vielen Dank und schöne Grüße
    derhenry

  2. Na ja das steht doch oben bzw. gleich auf der ersten Seite der swfir-Website beschrieben.

    1. Script in den Header einbinden (notfalls den Pfad anpassen):
    <script type="text/javascript" src="/swfir.js"></script>

    2. Bildern einen Effekt zuweisen (auch im Header)
    <script type="text/javascript">
    window.onload = function(){
    round = new swfir();
    round.specify('src', '/swfir.swf');
    round.specify('border-color', 'ffffff');
    round.specify('border-radius', '10');
    round.swap("img");
    }
    </script>

    Falls Du nicht weiter kommst, dann kuck Dir einfach mal die Beispiele auf der swfir-Website an.

Schreibe einen Kommentar.