Anleitung für SWFIR

Image Replacement

1 User 510 (Ex-Mitglied)

Guten Abend liebe Experten!

Ich bin durch ein Fachmagazin auf das Programm swfir aufmerksam geworden.

Leider scheint die "Anwendung" trotz der Anleitung für Nicht-Experten recht schwierig, ich selbst habe gerade zwei volle Stunden ohne erwünschten Erfolg damit verbracht.

Es fängt harmlos an: Download der entsprechenden Dateien - Entpacken - Upload auf den Server...

Ich habe dann die Zeile

<script type="text/javascript" src="swfir.js"></script>

in den Header eingefügt.

Danach sind alle weiteren Schritte ergebnislos verlaufen (ich verschweige sie hier mal lieber).
Im Netz ist keine detailierte Anleitung zu finden, somit die Bitte an euch...

Wäre hier eine Anleitung möglich?

2 StiffmasterX

Also soweit ich das sehe ist das ganz einfach

alles was du brauchts ist hier am Rand erklärt

Klick mich härter !!!

var borders = new swfir(); //für jedes neue Object ne neue Variable anlegen
borders.specify("border-radius", "15");// Funktion aussuchen aus der Liste und ein Attribut mit angeben wenn nötig
borders.swap("#content img"); //Hier noch im CSS stil angeben welche Objekte Bilder betroffen sein sollen

3 User 510 (Ex-Mitglied)

Zitat von stralsunder

Im Netz ist keine detailierte Anleitung zu finden, somit die Bitte an euch...
Wäre hier eine Anleitung möglich?

Ich hatte gehofft, dass solche nichthelfenden (sorry, nicht persönlich nehmen!) Antworten ausbleiben.
Aber wenn es so einfach wäre wie du schreibst, würde ich nicht fragen.

Vielleicht könntest du an einem Beispiel erklären wie das konkret funktioniert?

PS: Da Nicht-Experten im Netz wirklich keine (ausführliche) Anleitung finden können, wären Nutzern von Google & Co. gute Antworten sicherlich viele Besuche wert. ;-)

4 Jörg Kruse

In der swfir.txt im Zip-File ist es noch etwas ausführlicher erklärt.

Du sollst an das Ende des body noch ein zweites script einbauen:

			<script type="text/javascript">
				window.onload = function()
				{
					var sir = new swfir();
				}
			</script>

Das ergänzt du, wie im Zitat von StiffmasterX erklärt. Dort wurde das Objekt (passend zur Änderung "border-radius") "borders" benannt, statt "sir".

			<script type="text/javascript">
				window.onload = function()
				{
					var borders = new swfir();
 					borders.specify("border-radius", "15");
					borders.swap("#content img");
				}
			</script>

Statt "#content img" musst du noch einen passenden CSS-Selektor angeben. "#content img" bezieht sich auf alle <img> Elemente, die sich in <div id="content"> befinden. Da die Struktur deiner HTML-Datei wahrscheinlich anders ausschaut, musst du den Selektor entsprechend anpassen. Du kannst auch einfach "img" angeben - dann wird das Script auf alle Bilder angewendet.

5 User 510 (Ex-Mitglied)

Zitat von Jörg

Statt "#content img" musst du noch einen passenden CSS-Selektor angeben. "#content img" bezieht sich auf alle <img> Elemente, die sich in <div id="content"> befinden. Da die Struktur deiner HTML-Datei wahrscheinlich anders ausschaut, musst du den Selektor entsprechend anpassen. Du kannst auch einfach "img" angeben - dann wird das Script auf alle Bilder angewendet.

Danke für die schnelle Antwort Jörg.
Das (siehe Zitat) ist eigentlich der unverständlichste Punkt für mich.
Ich habe das ganze vorher auf der Website
www(Punkt)andre(Minus)klein(Punkt)de(Slash)index(Punkt)html
(großes Bild: <img src="bilder/12.jpg" alt="">)
testen wollen, weiß aber nicht wie der Selektor aussehen bzw. wie ich selbigen anpassen muss.
Auf alle Bilder soll es nicht angewendet werden, dass klappt hiermit

Zitat von Jörg

Du kannst auch einfach "img" angeben - dann wird das Script auf alle Bilder angewendet.

problemlos.

6 Jörg Kruse

Das ist wohl das Bild, um welches es geht:

<td><img src="bilder/12.jpg" alt=""></td>

Damit nur dieses Bild von dem Script bearbeitet wird, musst du die Tabellenzelle oder das Bild selbst noch kennzeichnen, z.B. indem du ihm eine Klasse oder ID zuweist. In dem folgenden Beispiel die ID "bla":

<td><img src="bilder/12.jpg" alt="" id="bla"></td>

Dann könnte man das Bild in CSS direkt ansprechen:

img#bla { /* irgendwelche Definitionen */ }

Entsprechend kann man diesen Selektor auch an das hier behandelte Script übergeben:

			<script type="text/javascript">
				window.onload = function()
				{
					var borders = new swfir();
 					borders.specify("border-radius", "15");
					borders.swap("img#bla");
				}
			</script>

Der Aufbau von CSS-Selektoren ist auf dieser Seite von SELFHTML erklärt:

http://de.selfhtml.org/css/formate/zentrale.htm

7 User 510 (Ex-Mitglied)

Okay, jetzt hab ich's. Vielen Dank Jörg.

Zusammenfassung:

<head>
[ ... ]
<script type="text/javascript" src="swfir.js"></script>
</head>

<body>
[ ... ]
<script type="text/javascript">
				window.onload = function()
				{
					var borders = new swfir();
 					borders.specify("border-width", "10");
					borders.specify("border-radius", "5");
					borders.specify("border-color", "fff");
					borders.specify("rotate","-5");
					borders.specify("shadow-blur", "20");
					borders.specify("background-color", "9dcee0");
					borders.swap("img#rounded");
				}
</script>
</body>

dazu in der css-Datei:

img#rounded { /* irgendwelche Definitionen */ }

(Muss ich hier noch was ändern?)

siehe:

www.andre-klein.de

8 Jörg Kruse

Zitat von stralsunder
dazu in der css-Datei:
img#rounded { /* irgendwelche Definitionen */ }
(Muss ich hier noch was ändern?)

Das war nur ein Beispiel, wie der Selektor in der CSS-Datei genutzt werden kann - das kannst du auch weglassen - das Bild wird ja jetzt über das Script formatiert.

9 Regano

Ich habe es auch schon mehrfach versucht, mich zu motivieren, es endlich mal zu verstehen. Aber irgendwie steige ich noch nicht ganz durch-aber ich versuche es heute mal wieder, wie man an meiner Anmeldung im Forum sehr gut erkennen kann *g* Werde dann mal rückmelden, wie es bei mir aussieht.

________________________________________
[Edit Jörg: Werbelink entfernt]

nach oben

Anleitung für SWFIR

Beitrag schreiben (als Gast)