Home > 2009年03月20日

2009年03月20日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • Comments (Close): -
  • TrackBack (Close): -

Wowheadのマウスオーバーツールチップ

はじめに

最近WoW関係のいろいろなサイトを眺めることが多くなった僕なんですが、アイテム名やクエスト名をマウスオーバーすると、Wowheadのアイテムリンクがポップアップするサイトをたまに見かけます。便利だなーと思ってすごくやってみたかったんですが、それができるようになったんです!

今日はそのやり方を、すぐ忘れてしまう自分の為にも残しておこうと思うのですが、僕のことですから間違っている可能性がありますので、もし参考にされる方がおられましたら、あまり信用しない感じでよろしくお願い致します(´・ω・`)


下準備

まずは準備として、HTMLの<head>~</head>の範囲内に下記の文を追加します。

<script src="http://www.wowhead.com/widgets/power.js"></script>

準備はたったこれだけです。あとは、Wowheadでお好きなアイテムを見つけて、そのページへのリンクを貼ればツールチップがポップアップするようになるのです!アイテムだけではなくspellやクエスト、アチーブメントなどもポップアップできるようですよブラザー。


HTMLコード

HTMLは次のように記述します。

<a href="リンク先のURL">アイテム名</a>

例えばDeath's Stingというダガーをポップアップさせたい場合は下記のように記述します。

<a href="http://www.wowhead.com/?item=21126">Death's Sting</a>

すると、アイテム名が表示されてマウスオーバーするとツールチップがポップアップするようになります。


Death's Sting

できました。このままでもいいのですが、このDeath's Stingというダガーは紫色のアイテムですから、せっかくなのでリンク色も紫にしようと思います。


アイテムと同じ色にする

アイテムと同じ色にしたい場合は、

<a href="http://www.wowhead.com/?item=21126" class="q#">Death's Sting</a>

上記のように<a>タグの中にclass="q#"を追加して、#の中に適切な数字を入れることでリンク色もそのアイテムと同じ色になります。この"q#"には"q0"~"q5"までがあって、以下のように対応しているようです。

classquality
class="q0"poorグレー
class="q1"common
class="q2"uncommon
class="q3"rare
class="q4"epic
class="q5"legendaryオレンジ

今回は紫色にしたいので、#の部分を4に置き換えて下記のようにします。

<a href="http://www.wowhead.com/?item=21126" class="q4">Death's Sting</a>


Death's Sting

わーいできたっちゃ!これからはこの機能も利用しながらやっていこうと思いマス!



参考ページ: Wowhead Tooltips: FAQ & Guides


スポンサーサイト

Home > 2009年03月20日

Search
Meta
Feeds

Return to page top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。