RSS abonnieren RSS für Artikel | Kommentare

Express-Tooltips – Gegenstandsinformationen beim Überfahren eines Links mit der Maus einblenden

25. Dezember 2008 | Autor: | Kategorie: Sonstiges | RSS 2.0

All diejenigen, die auch ein Blog, Forum oder eine Website über World of Warcraft betreiben kennen das – man verlinkt in seinen Beiträgen auf jede Menge Items, Quests, Rezepte, Fähigkeiten, etc. – zumeist verweisen die Links dann auf die buffed -, SpeedyDragon- oder die Wowhead-Datenbank. Da wäre es doch schön, wenn man beim Überfahren mit der Maus auch gleich die Gegenstandsinformationen angezeigt bekäme.

Deshalb überrascht es auch nicht, dass alle drei Portale inzwischen die Möglichkeit anbieten “Express-Tooltips” auf den eigenen Seiten einzubinden, um genau diesem Wunsch nachzukommen.

Was sind Express-Tooltips?

Beim Überfahren eines Links (z.B. auf ein Item) mit der Maus wird das entsprechende Icon sowie die Beschreibung des Items eingeblendet – genauso, wie man es auch aus dem Spiel kennt.

Wie binde ich Express-Tooltips ein?

Denkbar einfach: durch ein kleines Code-Snippet, dass von den Anbietern bereitgestellt wird:

buffed Datenbank
<script type=”text/javascript” src=”http://www.buffed.de/js/buffed-ext-wow-tooltips.js”></script>

SpeedyDragon Datenbank
<script src=”http://www.speedydragon.de/js/sdtooltips.js”></script>

Wowhead Datenbank
<script src=”http://www.wowhead.com/widgets/power.js”></script>

Der bereitgestellte Code muss an beliebiger Stelle in Eurer Seite eingebunden werden – theoretisch könnt Ihr diesen beispielsweise auch nur innerhalb eines Artikels hinzufügen. Richtiger wäre jedoch, das Code-Snippet global im HEAD-Bereich Eurer Seite einzubinden, da es sich um JavaScript handelt und dies üblicher Weise im Head eingebunden wird.

Bei WordPress würde dies in der header.php des genutzen Themes geschehen. Wählt hierzu Design -> Theme-Editor -> Header (header.php) aus und kopiert den Code-Schnipsel an eine Stelle im HEAD Bereich:

<head>

…hier kommt der Code Schnipsel rein…

</head>

Wie funktioniert der Express-Tooltip?

Das eingebundene Skript wird bei Aufruf Eurer Seite mitgeladen und ruft automatisch die Informationen des verlinkten Items aus der Datenbank ab und blendet diese beim Überfahren mit der Maus samt Icon ein. Habt Ihr den Code-Schnipsel ‘global’ in Eurer heder.php eingebunden gilt dies für alle Eure Seiten – habt ihr den Code hingegen nur für eine einzelne Seite oder einen Artikel eingebunden, funktioniert dies auch nur für diese Seite.

Grundsätzlich gilt aber auch, dass das Script nur mit Links funktioniert, die auch auf die jeweilige Datenbank verweisen. Ich werde also keinen Erfolg haben, wenn ich das Script von Wowhead als Code-Schnipsel einbinde, mit meinen Links aber immer auf die SpeedyDragon Datenbank verweise.

Ihr müsst Euch also entscheiden, welchen Code-Schnipsel der drei Datenbanken Ihr einbinden möchtet und dies dann auch bei der Verlinkung berücksichtigen. Aber ich gehe mal davon aus, dass Ihr bestimmt ohnehin schon Eure persönliche “Lieblingsquelle” habt, die Ihr regelmäßig für Links nutzt.

Wie sehen Express-Tooltips aus?

Ich greife an dieser Stelle mal einige Beispiele auf und binde nacheinander das Code-Snippet von allen drei Anbietern ein:

buffed Gegenstand: Schreckensplattenhelm des tödlichen Gladiators

SpeedyDragon Gegenstand: Schreckensplattenhelm des tödlichen Gladiators

Wowhead Gegenstand: Schreckensplattenhelm des tödlichen Gladiators

Von der Funktionsweise sind alle drei identisch, wobei ich sagen muss, dass mir die Wowhead Variante mit Icon und Beschreibung persönlich am Besten gefällt. Bei SpeedyDragon stimmt der Abstand des Icons zur Beschreibung nicht und bei buffed fehlt das Icon.

Die Verlinkung funktioniert nicht für Gegenstände, sondern auch für Quests, Fähigkeiten und Erfolge:

Metzen das Rentier (Quest verlinkt mit Wowhead Datenbank)

Mal des Jägers (Fähigkeit verlinkt mit buffed Datenbank)

Irgendwo muss Happy Hour sein (Erfolg verlinkt mit Speedy Dragon)

Wie kann ich z.B. Items gemäß ihrer Wertigkeit einfärben?

Vielleicht kennt oder nutzt der Ein oder Andere von Euch noch das inzwischen schon ältere Plugin itemstats von Yahourt? Ich habe dieses selbst zu Beginn genutzt, muss aber sagen, dass es durch die Express-Tooltips inzwischen prima abgelöst werden kann. Einziger Vorteil, den itemstats bot, war das automatische Einfärben von Item-Links – beispielsweise lila für epische oder grün für seltene Gegenstände.

Wie Ihr oben gesehen habt, wird für die von mir verlinkten Gegenstände schlichtweg die definierte Linkfarbe meines Themes verwendet (gelb) und nicht die korrekte Farbe des Gegenstandes in WoW.

Schreckensplattenhelm des tödlichen Gladiators

<a href=”http://de.wowhead.com/?item=40824″>Schreckensplattenhelm des tödlichen Gladiators</a>

Ist ein epischer Gegenstand und müsste genaugenommen lila sein – wie man in Nimberts Blog sehr schön sehen kann, ist es mit Wowhead aber durchaus möglich, eine manuelle Anpassung vorzunehmen, um Links auch einzufärben:

Schreckensplattenhelm des tödlichen Gladiators

<a class=”q4″ href=”http://de.wowhead.com/?item=40824″>Schreckensplattenhelm des tödlichen Gladiators</a>

Durch eine kleine, manuelle Ergänzung im <a href…> kann ich die Farblichkeit des Links durch eine Klasse bestimmen, indem ich durch das Ergänzen von class=”q4″ dem Link die information mitgebe, dass er bitte nach Abruf der Informationen bei Wowhead den Link lila einfärben soll.

Selbstverständlich kann ich aber auch jede andere Farbe definieren, indem ich den entsprechenden Wert für die Klasse eintrage:

Legendär entspricht class=”q5″

Schreckensplattenhelm des tödlichen Gladiators

<a class=”q5″ href=”http://de.wowhead.com/?item=40824″>Schreckensplattenhelm des tödlichen Gladiators</a>

Episch entspricht class=”q4″

Schreckensplattenhelm des tödlichen Gladiators

<a class=”q4″ href=”http://de.wowhead.com/?item=40824″>Schreckensplattenhelm des tödlichen Gladiators</a>

Rar entspricht class=”q3″

Schreckensplattenhelm des tödlichen Gladiators

<a class=”q3″ href=”http://de.wowhead.com/?item=40824″>Schreckensplattenhelm des tödlichen Gladiators</a>

Selten entspricht class=”q2″

Schreckensplattenhelm des tödlichen Gladiators

<a class=”q2″ href=”http://de.wowhead.com/?item=40824″>Schreckensplattenhelm des tödlichen Gladiators</a>

Normal entspricht class=”q1″

Schreckensplattenhelm des tödlichen Gladiators

<a class=”q1″ href=”http://de.wowhead.com/?item=40824″>Schreckensplattenhelm des tödlichen Gladiators</a>

Minderwertig entspricht class=”q0″

Schreckensplattenhelm des tödlichen Gladiators

<a class=”q0″ href=”http://de.wowhead.com/?item=40824″>Schreckensplattenhelm des tödlichen Gladiators</a>

Es findet, wie man in oberem Beispiel sieht, keine automatische Überprüfung statt, ob die von mir eingetragene Wertigkeit auch tatsächlich der des Gegenstandes entspricht – der Schreckensplattenhelm ist und bleibt (wie im Tooltip zu sehen) episch.

Ob diese Funktion des Einfärbens auch für SpeedyDragon und buffed möglich ist, weiß ich leider nicht und konnte bislang auch keine Infos hierzu finden, aber vielleicht ist Euch etwas hierzu bekannt?

Tags: , ,
25. Dezember 2008 | zuletzt bearbeitet am: 26. Dezember 2008 | Autor: | Kategorie: Sonstiges | RSS 2.0

6 Kommentare

    Schreib einen Kommentar! »
  1. Hey das is ziemlich cool
    danke das werd ich in meinen Blog einbauen.^^
    Mir gefällt die Seite hier.
    Weiter so.

    mfg Elron

  2. Schreckensplattenhelm des tödlichen Gladiators

  3. giebt es eine möglichkeit das man die sockelbelegung mit angeben kann wodurch bei gruppengegenständen der richtige markiert wird wie kopf, fuß usw.?

    gruß Nuqduj

  4. Schreckensplattenhelm des tödlichen Gladiators

  5. Ist es möglich, dass nur das Skript von SpeedyDragon funktioniert? WoWHead und Buffed gehen bei mir auf dieser Seite nicht.

    Ansonsten Klasse Beitrag, danke!

    MfG
    Flo

  6. Test
    Schreckensplattenhelm des tödlichen Gladiators

Schreib einen Kommentar!