HTML

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:
<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>


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!

Impressum / Datenschutzerklärung          © der-Webdesigner.net 2002 - 2008           top ▲