Wie mache ich ein Spielerfließband? - Tutorial

Gehe zu Seite Zurück 1, 2, 3 Weiter

Autor

Nachricht

Gast

Der Code nun mit dem Bild von Michael Ballack:

http://www.transfermarkt.de/bilder/spielerfotos/s_63_2007_3.jpg

Trikotnummer ändern:
http://www.transfermarkt.de/bilder/trikot/5.gif

Es bietet sich hier an, die Trikots von Transfermarkt zu nehmen. Möchte man nun Frings die 10 geben, so fügt man anstelle der 5 in der URL die 10 ein.
Man kann die Nummern nach Lust und Laune vergeben, oder sich an den Nummern orientieren, die die Spieler auch im Verein besitzen.

Beispiel:
Nummer 5: http://www.transfermarkt.de/bilder/trikot/5.gif
Nummer 10: http://www.transfermarkt.de/bilder/trikot/5.gif

Name ändern:
Torsten
Frings
Torsten Frings

Der obige Code beinhaltet den Namen des jeweiligen Spielers (hier: Torsten Frings). Fügt man nun einen anderen Namen ein, so sollte der Zeilenabstand
bleiben, da sonst das Bild verrutscht und dann das Laufband nicht mehr sauber aussieht.

Beispiel:
Torsten Fings: Torsten
Frings
Michael Ballack: Michael
Ballack

4. Schritt: Weitere Details ändern - nicht unbedingt notwendig

Laufbanddetails:
http://de.selfhtml.org/html/text/proprietaer.htm#marquee
Mit <marquee> leiten Sie den zu scrollenden Inhalt ein. Dahinter folgt der Inhalt, der gescrollt werden soll. Am Ende notieren Sie ein abschließendes </marquee>.
Mit direction="right" im einleitenden Tag erzwingen Sie die Laufrichtung von links nach rechts (direction = Richtung, right = rechts). Mit direction="left" stellen Sie die Laufrichtung auf rechts nach links (Voreinstellung). Mit direction="up" stellen Sie die Laufrichtung von unten nach oben und mit direction="down" von oben nach unten.
Durch das Attribut scrollamount bestimmen Sie die Pixelanzahl zwischen den Scroll-Zuständen. Mit scrolldelay legen Sie die Verzögerung zwischen zwei Scroll-Zuständen in Millisekunden fest (amount = Zustand, delay = Verzögerung).
Mit behavior="alternate" erzwingen Sie den Wechseleffekt (behavior = Verhalten, alternate = wechselnd).
Durch das Attribut bgcolor erzwingen Sie, dass der gescrollte Text in einem andersfarbigen Rahmen erscheint (bgcolor = background color = Hintergrundfarbe). Für die Farbauswahl gelten die Regeln zum Seite Definieren von Farben in HTML.
Mit align="top" erreichen Sie, dass der umgebende Text obenbündig zu dem Marquee-Text ausgerichtet wird. Mit align="middle" wird der umgebende Text mittig ausgerichtet, mit align="bottom" untenbündig (align = Ausrichtung, top = oben, middle = mittig, bottom = unten).
Mit height bestimmen Sie die Höhe des Marquee-Bereichs (height = Höhe). Diese Angabe ist vor allem interessant, wenn Sie für den Marquee-Bereich eine eigene Hintergrundfarbe bestimmen. Mit der Höhe des Marquee-Bereichs legen Sie dann die Höhe des andersfarbigen Kastens fest, in dem der Marquee-Text gescrollt wird. Die Angabe erfolgt entweder absolut in Pixeln, oder in Prozent relativ zur Höhe des Anzeigefensters.
Mit hspace bestimmen Sie den Abstand zwischen Marquee-Text und dem Text davor bzw. dahinter (hspace = horizontal space = horizontaler Abstand). Dieses Attribut ist nur von Bedeutung, wenn Sie den Marquee-Bereich mitten im Text definieren. Der Wert erfolgt in Pixeln. Der angegebene Abstand gilt sowohl für den Text davor als auch für den Text dahinter.

Hintergundfarbe ändern:

Verfasst am: 16 Apr 2009 20:12 Titel: Re: Wie mache ich ein Spielerfließband? - Tutorial

Hallo Miteinander,

da immer wieder Anfragen zur Erstellung eines Spielerfließbandes auftauchen, nun mal eine Beschreibung, wie auch HTML-Laien sich selbst so etwas herstellen können.

1. Schritt: Der Code

Als Grundgerüst werden nun 2 Fließbänder dienen, einmal mit Trikotnummern und einmal ohne. Der Hintergrund ist schwarz.

Laufband mit Trikot:
<marquee>

Torsten
Frings

</marquee>

Laufband ohne Trikot:
<marquee>

Bastian
Schweinsteiger

</marquee>

Wichtig ist nun der der oben gefärbten Codeabschnitt. Hier können nun die Details geändert werden wie: Foto, Trikot und Name.

2. Schritt: Spieler einfügen

Um mehrere Spieler im Laufband zu haben, muss man nur den schwarzen Codeabschnitt kopieren und hinten einfügen. Dies sieht dann so aus:

<marquee>

Torsten
Frings

Torsten
Frings

Torsten
Frings

</marquee>

3. Schritt: Details einfügen/ändern

Wir nehmen hier mal das Beispiel mit Torsten Frings und Michael Ballack. Man geht nun wie folgt vor:

Bild ändern:
http://www.transfermarkt.de/bilder/spielerfotos/s_528_2007_4.jpg

Der obige Code ist die URL/Internetadresse des Bildes von Frings. Man sucht also nach dem Bild im www . Empfehlenswert ist hier die Homepage www.transfermarkt.de . Die Bilder vom kicker sind leider aus bestimmten Gründen bei Comunio nicht mehr möglich.
Sollte es das Bild nicht bei Transfermarkt geben oder man möchte ein anderes Bild nehmen, so kann man bei Google oder sonst wo suchen.

Man klickt dann, wenn man das Bild auf der Internetseite sieht, nun auf die rechte Maustaste und dann auf Grafikadresse kopieren. Dann markiert man die URL im Code und fügt an dessen Stelle die neue URL ein.

Beispiel:
Der Code mit dem Bild von Frings: http://www.transfermarkt.de/bilder/spielerfotos/s_528_2007_4.jpg

Torsten
Frings

Die Farbe Schwarz/Black lässt sich hier ändern, in dem man es einfach ersetzt mit z.B. red, yellow etc. Wichtig ist nur, dass die Farbe in englischer Sprache dort steht. Auch kann man Farbcodes nehmen (siehe unteren Link)

http://www.html-php-mysql.de/generatoren/colors.php

Der Farbcode muss dann so eingefügt werden: (Wichtig: Die Raute # muss davor stehen!)

Wappen statt Trikot:
Möchte man nun z.b. das Wappen von SV Werder Bremen statt des Trikots dort haben, so fügt man statt der Bildurl vom Trikot, die URL des Wappens ein. Wichtig ist noch, dass man die Größenangaben (width="40" height="40") dabei entfernt.
Code mit der Trikoturl:
Code mit der Wappenurl:
Die Wappen findet man hier: http://www1.comunio.de/external/phpBB2/viewtopic.php?t=142844

Bei Fragen und Problemen kann gerne dieser Thread benutzt werden. Nun also viel Spaß beim Laufbanderstellen!

______________________________________________________________________________________________________________

Beispielcode mit 11 Spielern und mit Trikots:

<marquee>