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><table cellspacing="4" cellpadding="3"><tr>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_528_2007_4.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/5.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b>Torsten<br>Frings</b></font></center></td></tr></table></td>
</tr></table></marquee>
- Laufband ohne Trikot:
- <marquee><table cellspacing="4" cellpadding="3"><tr>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_2514_2007_3.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><center><font color="white" size="3" face="arial"><b>Bastian<br>Schweinsteiger</b></font></center></td></tr></table></td>
</tr></table></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><table cellspacing="4" cellpadding="3"><tr>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_528_2007_4.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/5.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b>Torsten<br>Frings</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_528_2007_4.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/5.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b>Torsten<br>Frings</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_528_2007_4.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/5.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b>Torsten<br>Frings</b></font></center></td></tr></table></td>
</tr></table></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:
- <IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_528_2007_4.jpg" width="150" height="175" BORDER="0">
- 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
- <td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_528_2007_4.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/5.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b>Torsten<br>Frings</b></font></center></td></tr></table></td>
- Der Code nun mit dem Bild von Michael Ballack: http://www.transfermarkt.de/bilder/spielerfotos/s_63_2007_3.jpg
- <td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_63_2007_3.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/5.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b>Torsten<br>Frings</b></font></center></td></tr></table></td>
- Trikotnummer ändern:
- <img src="http://www.transfermarkt.de/bilder/trikot/5.gif" width="40" height="40">
- 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.
- Name ändern:
- <font color="white" size="3" face="arial"><b>Torsten<br>Frings</b></font>
- 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 <br> bleiben, da sonst das Bild verrutscht und dann das Laufband nicht mehr sauber aussieht.
- Beispiel:
- Torsten Fings: <font color="white" size="3" face="arial"><b>Torsten<br>Frings</b></font>
- Michael Ballack: <font color="white" size="3" face="arial"><b>Michael<br>Ballack</b></font>
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:
- <td bgcolor="black">
- 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!)
- <td bgcolor="#FF664C">
- 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: <img src="http://www.transfermarkt.de/bilder/trikot/5.gif" width="40" height="40">
- Code mit der Wappenurl: <img src="http://www3.comunio.de/i/c/werder.gif">
- 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><table cellspacing="4" cellpadding="3"><tr>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_1144_2007_1.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/1.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b>Christofer<br>Heimeroth</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_1073_2007_1.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/2.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b>Manuel<br>Friedrich</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_1432_2007_2.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/3.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b>Fernando<br>Meira</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_32213_2007_2.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/4.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b><br>Naldo</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_37666_2007_1.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/5.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b>Arturo<br>Vidal</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.weltfussball.de/bilder/spieler/9462.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/6.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b>Maximilian<br>Nicu</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_3256_2007_1.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/7.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b>Roberto<br>Hilbert</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_2334_2007_2.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/8.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b>Marcel<br>Ndjeng</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_37176_2007_1.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/9.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b>Rob<br>Friend</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_2874_2007_1.jpg" width="150" height="175" BORDER="0"><br>
<br><table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/10.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b>Mladen<br>Petric</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_4977_2007_3.jpg" width="150" height="175" BORDER="0"><br>
<br><table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><img src="http://www.transfermarkt.de/bilder/trikot/13.gif" width="40" height="40"></td>
<td><center><font color="white" size="3" face="arial"><b>Alexander<br>Frei</b></font></center></td></tr></table></td>
</tr></table></marquee>
Beispielcode mit 11 Spielern und ohne Trikots:
<marquee><table cellspacing="4" cellpadding="3"><tr>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_1144_2007_1.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><center><font color="white" size="3" face="arial"><b>Christofer<br>Heimeroth</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://cache.daylife.com/imageserve/0aFYcGE9pa9b5/340x.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><center><font color="white" size="3" face="arial"><b>Ricardo<br>Costa</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_2963_2007_1.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><center><font color="white" size="3" face="arial"><b>Martin<br>Demichelis</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_28947_2007_1.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><center><font color="white" size="3" face="arial"><b>Gonzalo<br>Castro</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_29579_2007_1.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><center><font color="white" size="3" face="arial"><b>Pável<br>Pardo</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_89_2007_1.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><center><font color="white" size="3" face="arial"><b>Zé<br>Roberto</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_692_2007_3.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><center><font color="white" size="3" face="arial"><b>Tim<br>Borowski</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_6645_2007_2.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><center><font color="white" size="3" face="arial"><b>Tranquillo<br>Barnetta</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_2514_2007_3.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><center><font color="white" size="3" face="arial"><b>Bastian<br>Schweinsteiger</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_16833_2007_1.jpg" width="150" height="175" BORDER="0"><br>
<br><table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><center><font color="white" size="3" face="arial"><b>Ciprian<br>Marica</b></font></center></td></tr></table></td>
<td bgcolor="black"><IMG SRC="http://www.transfermarkt.de/bilder/spielerfotos/s_3114_2007_1.jpg" width="150" height="175" BORDER="0"><br><br>
<table cellpadding="0" cellspacing="0" width="150"><tr><td width="4"></td>
<td><center><font color="white" size="3" face="arial"><b>Jan<br>Schlaudraff</b></font></center></td></tr></table></td>
</tr></table></marquee>