Linking to World of Warcraft items from Blogger

An upcoming series of reports I am producing are about items worn / used by players in my armory database; in order to spruce them up I decided to link to the items in Wowhead / Allakhazam. Although I would have preferred to use Wowhead, I noticed Allakhazam had a 'Lite' HTML description for each item - perfectly proportioned for a floating IFRAME.

Following a little experimentation I came up with some Blogger friendly HTML code that allows me to display a popup IFRAME containing the item description. Tested in Firefox 2 & Internet Explorer 6 (yuk!) it appears to work. If your browser doesn't support Javascript you just click the link to see the item as you would with any normal hyperlink.

Examples:

- [Gyro-balanced Khorium Destroyer]
- [Beast Lord Cuirass]

Issues:

IE6 - Unfortunately, the IFRAME appears with a white background despite various tries to resolve it - it's transparent in Firefox. The issue is the 'Lite' page over at Allakhazam needs 'background-color:transparent;' in order to make this work.

Installation:

1. Login to your Blogger Dashboard
2. Click the 'Manage: ... Layout' link
3. Click the 'Edit HTML' link
4. Locate a </head> in the Template HTML, and just before it copy & paste the following lines:

<!-- WoW Item Popup v1.3 --> <style type="text/css">
#wowitemfloat { position:absolute; left:200px; top:200px; z-index:100; }
.poor { color:#9d9d9d !important; text-decoration:none; }
.common { color:#ffffff !important; text-decoration:none; }
.uncommon { color:#1eff00 !important; text-decoration:none; }
.rare { color:#0070dd !important; text-decoration:none; }
.epic { color:#a335ee !important; text-decoration:none; }
.legendary { color: #ff8000 !important; text-decoration:none; }
.artifact { color: #e5cc80 !important; text-decoration:none; }
</style> <script type='text/javascript'>
function showWowitem( event, id ) {
var element = document.getElementById('wowitemfloat');
element.style.visibility = 'visible';
element.style.top = event.pageY ? event.pageY + 'px' : (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
element.style.left = event.pageX ? event.pageX + 'px' : (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
document.getElementById('wowitem').src = 'http://wow.allakhazam.com/ihtml?' + id; }
function hideWowitem() {
document.getElementById('wowitemfloat').style.visibility = 'hidden';
document.getElementById('wowitem').src = ''; }
</script>
<div id="wowitemfloat" style="visibility:hidden;">
<iframe id="wowitem" src="" style="width:370px; height:500px; border:0px; background-color:transparent; filter: chroma(color=#FFFFFF);" frameborder="0" border="0" allowtransparency="true" background-color="transparent"></iframe>
</div> <!-- WoW Item Popup v1.3 -->

5. Now click 'Save Template'

Tada!

You've now installed the code to enable the item popup. All you need to do is craft a HTML link to trigger it into action.

- [Gyro-balanced Khorium Destroyer]
<a href="http://wow.allakhazam.com/item.html?witem=32756" class="epic" onmouseover="showWowitem(event,32756);" onmouseout="hideWowitem();">[Gyro-balanced Khorium Destroyer]</a>

- [Beast Lord Cuirass]
<a href="http://wow.allakhazam.com/item.html?witem=28228" class="rare" onmouseover="showWowitem(event,28228);" onmouseout="hideWowitem();">[Beast Lord Cuirass]</a>

Apart from the IE6 problem, it works pretty well. :)

Any comments / feedback welcomed.

EDIT 20th July: Added Legendary & Artifact support
EDIT 21th July: Added IE6 iframe workaround from Gerald Howell
EDIT 27th November: This script has been retired, see this post for more details.