Zur Navigation

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?

25.03.2009 19:38 | geändert: 26.03.2009 17:20

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

25.03.2009 20:11

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. ;-)

25.03.2009 20:36 | geändert: 25.03.2009 20:41

4 Jörg

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.

26.03.2009 11:41 | geändert: 26.03.2009 11:44

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.

26.03.2009 17:18 | geändert: 26.03.2009 17:29

6 Jörg

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

26.03.2009 17:33

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

26.03.2009 18:08 | geändert: 26.03.2009 18:09

8 Jörg

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.

26.03.2009 18:18

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]

05.04.2009 12:51 | geändert von Jörg: 05.04.2009 13:58

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]