Photoshop
Cinema 4d
HTML / CSS
JavaScript
PHP
Flash
Fotografie
Terragen
Webserver
Informatik
Sonstige
ICQ Online-Status Anzeige (HTML Tutorial)
Tutorial erstellt von SvenSun, letzte Änderung am 13.07.2007
Wie wir alle wissen, hat ICQ die Anzeige des OnlineStatuses auf der eigenen Website mit einer eigenen Grafik unmöglich gemacht, doch es gibt eine etwas andere Methode den Online-Status mit einer zum Teil eigenen Grafik auf seiner Website anzeigen zu lassen, welche auch von PHPbb genutzt wird.
Es ist im Grunde ganz einfach: Man hat eine Grafik, auf welcher dann die Standard-Grafik des ICQ-Indikators angezeigt wird, für welche man die Codes auf ICQ.com bekommt. Hier einmal das Ganze vereinfacht dargestellt:

In einem Beispiel Code kann man es vielleicht zusätzlich noch klarer darstellen:
Code:
Der Code der ICQ Standard Grafik ist dieser:
Code:
Und als eigene Grafik benutze ich nun diese, wobei ich allerdings die Standard Grafik erst heruntergeladen habe um die schwarze Fläche richtig einzuzeichnen und den Schatten zu erstellen:

Nun verbinden wir die beiden Bilder über den HTML-Code von oben. Das sollte dann mit meiner Beispiel-Grafik so aussehen:
Code:
Nun sollte das ganze so aussehen:

Es mag ärgerlich sein diese Blume verwenden zu müssen, aber ICQ scheint darauf zu bestehen, dass die original ICQ-Blume verwendet wird. Daher dürfte es auf kurz oder lang keine Alternative geben, als die Blume zu verwenden und durch ein Hintergrundbild an das Design anzupassen. Vorteilhaft ist jedoch der softwareergonomische Wiedererkennungseffekt, denn ein anderes Logo würde man wohl kaum mit ICQ in Verbindung bringen.
Ich hoffe euch hat das Tutorial gefallen und ihr habt alles verstanden. Wenn nicht, dann stellt eure Fragen einfach im Forum.
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
Es ist im Grunde ganz einfach: Man hat eine Grafik, auf welcher dann die Standard-Grafik des ICQ-Indikators angezeigt wird, für welche man die Codes auf ICQ.com bekommt. Hier einmal das Ganze vereinfacht dargestellt:

In einem Beispiel Code kann man es vielleicht zusätzlich noch klarer darstellen:
Code:
<table>
<tr>
<td background="{eigene Grafik}">{ICQ Standard Grafik}</td>
</tr>
</table>
<tr>
<td background="{eigene Grafik}">{ICQ Standard Grafik}</td>
</tr>
</table>
Der Code der ICQ Standard Grafik ist dieser:
Code:
<img src="http://web.icq.com/whitepages/online?icq={deine ICQ Nummer}&img=5" alt="icq" width="18" height="18" border="0" />
Und als eigene Grafik benutze ich nun diese, wobei ich allerdings die Standard Grafik erst heruntergeladen habe um die schwarze Fläche richtig einzuzeichnen und den Schatten zu erstellen:

Nun verbinden wir die beiden Bilder über den HTML-Code von oben. Das sollte dann mit meiner Beispiel-Grafik so aussehen:
Code:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="76" height="18" background="eigenegrafik.gif">
<img src="http://web.icq.com/whitepages/online?icq={deine ICQ Nummer}&img=5" alt="icq" width="18" height="18" border="0" />
</td>
</tr>
</table>
<tr>
<td width="76" height="18" background="eigenegrafik.gif">
<img src="http://web.icq.com/whitepages/online?icq={deine ICQ Nummer}&img=5" alt="icq" width="18" height="18" border="0" />
</td>
</tr>
</table>
Nun sollte das ganze so aussehen:

Es mag ärgerlich sein diese Blume verwenden zu müssen, aber ICQ scheint darauf zu bestehen, dass die original ICQ-Blume verwendet wird. Daher dürfte es auf kurz oder lang keine Alternative geben, als die Blume zu verwenden und durch ein Hintergrundbild an das Design anzupassen. Vorteilhaft ist jedoch der softwareergonomische Wiedererkennungseffekt, denn ein anderes Logo würde man wohl kaum mit ICQ in Verbindung bringen.
Ich hoffe euch hat das Tutorial gefallen und ihr habt alles verstanden. Wenn nicht, dann stellt eure Fragen einfach im Forum.
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!