Wednesday, 18 July 2007

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.

25 comments:

BRK said...

OMG... we're SO going to try this out!

Thank you thank you thank you!

BRK said...

It is working for us. Nice job, just beautiful.

Gyldenfeax said...

What about Legendary and Artifact grade items?

Okoloth said...

"Okoloth hovers his hand over the keyboard and speaks some ancient words... a few moments later, it is done"

Support for Legendary and Artifact items is now included. :)

Boo said...

That's very sweet. Transparency doesn't seem to work in Opera either, but otherwise it works perfectly.

JJM said...

Very, very nice.

I'll probably be using this shortly on my WoW blog.

Doogie said...

One of my C-programming pet peeves is when someone puts the opening brace on the same line as the function prototype.

Very fancy, though. Cool stuff.

Karl said...

There appears to be some Mac browser problems, but it is working in some. I'l try to give you the details after I do some more testing.

BRK said...

We use MacOS 10.4.10 and Firefox with no problems, Karl. What are you using that produces errors?

Okoloth said...

Doogie, I can assure you my day-job C code is far more readable ... Well, at least I think so!

Karl, to be honest I haven't tried all permutations of system / browser yet. I have access to most platforms and browsers and will no doubt refine my code in the coming days.

I have added "WoW Item Popup v1.1" HTML comments to the top and bottom to make it quite clear which revision is in use.

Glad to see other people using it already :)

Gerald Howell said...

I have been playing with this because I am forced to use IE6. Well I added this to the style of the iframe: filter:progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=100, startx=0, finishx=0,starty=45, finishy=100);

It is not perfect but I'm not seeing the long white background.

Gerald Howell said...

Nevermind the last comment. I kept searching and found this:

filter: chroma(color=#FFFFFF);

Just add it to your iframe style.
I only tested on IE 6/7 and FF2.

Okoloth said...

Thanks Gerald,

I have updated the code in the post with your fix and tested it in FF2 & IE7, much appreciated :)

Gerald Howell said...

One last thing. I promise!!! I forgot to tell you I set the frameborder to zero in the iframe.

Okoloth said...

I'm very much obliged sir, I've tested out this futher fix and it gets rid of the gawdy border around the IFRAME.

The code shown in the post has been updated once again.

Gerald Howell said...

My pleasure. You did some mighty good work here. :)

Gyldenfeax said...

Excellent. Ancient words be powerful.

Leiandra said...

A sincere thank you. I had pretty much given up on having this goal of my blog become a reality.

RedForty said...

Hi there! I just saw that you can get the clean XML readout of an item from wowhead.com

It would take a little bit to make a stylesheet and a small javascript function to retrieve it. Just add &xml to the end of any item in wowhead.

Like so:
http://www.wowhead.com/?item=32756&xml

Someone said...

Excelent work, thanks!

For those among you that, like myself, use Windows Live Writer, I wrote a small plugin to help using this... :) Check my post about it.

rufbo said...

Anybody had much trouble with far-out floats? I've cheesed out and used a Blogger template for my WoW blog and it seems there's a good war of the stylesheets going on that f00ks the float.

Visual evidence related to local test edits to this post.

Works great in a simplest case page. Guess I'll start wading through Blogger's wonderfully obtuse template code, but thought I'd check here first.

Sellia said...

Nice work !
Thanks for that !

=)

Dave said...

Thanks for sharing!

Girl Meets WoW said...

Directed here from http://bigbearblogger.blogspot.com... this is some great stuff. Thanks for sharing this with the rest of the WoW blogging community!

Draezele said...

Okoloth,

Do you have an intention of creating code to link to Wowhead instead? Although it's not a huge issue for your datamining, it'd be nice to link to 2.3 items and Allakhazam doesn't update until items go live.