Island
The image that appears when you do that is called a Tooltip. <--Hover!
Many MTG sites utilize this technology nowadays, and just recently, the main site itself, wizards.com has started using Autocarding and Hovering Images in their articles. Look here for an example. StarCityGames will hopefully be next, as they're one of the major sites that hasn't implemented this feature yet.
However, another feature they probably DO use is AutoCardLinking, which is different from Tooltips.
Autocardlinks just means that, given an article with lots of card names in it, a script replaces all of the card names with links, whether the links go to Gatherer or Magiccards.info. Or just to a jpg of that card image.
In this post. I will explain how you can do it, too. Although I'm going to be honest, I'm not super good at programming, and therefore my methods are not totally user friendly or robust or even 100% working. (I did this just last night, and I'm still fixing it...) But I am willing to answer any questions, just comment afterwards.
Fortunately, the TOOLTIP part of this is the easiest, and anyone can implement Tooltips on their blog. First, I will explain how to do it in BLOGGER specifically, or BLOGSPOT. And then I will note how it probably works on other blogs like Wordpress. It's a simple copy and paste job.
//NOTE! If you have a FREE Wordpress account and are using the Wordpress.com server, you apparently cannot edit your templates. Wordpress doesn't give you as much customization power on their server. But if you have your own paid for web server or you use their upgraded version which apparently costs $15, you should be able to do it by editting the header.php file (Tell me if this is wrong). I don't own a paid for WordPress account, so I don't know what it looks like. On the other hand, a paid for WordPress account has a bunch of MTG plug-ins anyway, and a bunch of features are probably already available on the web somewhere! Just gotta look!
Go to your LAYOUT page for the Blog. Then go to EDIT HTML. You should be here:
A friendly suggestion before you do anything: COPY-PASTE everything in the box and save it to a TXT file for safe keeping. That way, if you accidentally fuck something up, you have a reset button.
CTRL-F or FIND the following text:
</head>
Now click in the little textbox below and CTRL-A to select all. CTRL-C to copy. Then CTRL-P to paste JUST BEFORE the </head> marker.
Now save your template by clicking the orange button at the bottom. Now you've implemented the script that will allow you to add Tooltips to your blogposts. Tooltips have to be inserted manually into your posts, just like links and images. Here is an example code:
This generates the following HTML:
Time Sieve
So you can see that I have made the LINK go to Magiccards.info, but the SCREENSHOT is from a card image from wizards.com. You can use any Screenshot of card images you find on the web.
And that's basically it! You have hovering card images!
For other blog sites, you simply have to find where you can edit the main Template or Code that will be applied to each of your pages. Then paste the Javascript above before your </head> marker. Same idea.
Here's where I found most of this helpful information.
********************************************************
You can already see that if you have a lot of card names in your posts, manually entering all these links and things will get tedious. I think that's why most blogs don't even bother! Besides, readers generally know what cards do. But since DHaas asked about it, I simply responded with, "I'll see if I can write a program." It seemed logical.
I'm still working on this part, so ... it's not 100% functional. But I mean, ultimately, besides bugs, it took very little real programming or effort. So if you already program, then you ought to be able to do this quite easily without my help -- since you probably program better than I do. Haha. Most certainly.
If I owned any webspace, I could probably get it to work on a webpage, so that anyone could do it with a click of a button. If you're interested in letting me play around on your webserver or something that would be neat. Or if you want to do it yourself, maybe you ought to, so that I don't have to spend time tinkering with it. :P Me tinkering wouldn't be as fast as having someone knowledgeable just get it done.
The concept is simple:
You need a database (or a textfile or whatever) of a list of all Cards in Magic. I generated one from the Price Guide you can download for MWS. (It helps if you eliminate duplicates from separate editions.)
Then, you read a textfile that contains the article that you want to have card linked. Replace all the card-name strings with the code for links with Tooltips. In Python it's a very short and basic program. Then, output a different textfile with the finished article. Ta-da!
Ok, it's a little more complicated than that because working with Strings is generally messy. You could also use Regular Expressions, if you're so inclined! That's probably better. But I don't know RegEx.
Some issues include:
1) There are a lot of cards in Magic that have names within names. For instance, the card Blight and the card Blightning are two separate cards. How does the program know whether to link the "Blight" part or the "Blightning" part in the word Blightning?
1a) A subissue of this is that if there were a card that was named "Blighted" for example, and you were writing an article where you refer to the card Blight, but use the VERB form of the card, (ex. "I Blighted him on my turn"), then how do you make the link go to Blight and not Blighted? (This is where things like [c][/c] is useful instead of autocardlinks because you can then specify what you wanted to link. Maybe I'll implement that instead... back to the drawing board? On the other hand, I find even inserting tags is annoying and tedious. Well, I could do both if it comes down to it.)
2) What if your article contains card names that are not simply text? For instance, what if you have a link to an image with the text "Terminate" like "Terminate.jpg". The program will want to replace that String with its own HTML code, which will fuck up your code. (This issue would also be prevented by using [c][/c] tags.)
There may be more I'm forgetting right now. But the first issue, I dealt with using a weird work around, based on the fact the Python Replace function is case sensitive. It is sufficient for a small blog like mine.
For the code itself, in case you're curious, here it is. No comments. I know, terrible. But it's just a functional program, not meant for commercial purposes. Lol. I almost wrote it in Java, but then I was like... but Python is so much easier! :P
If you liked this article, tell your friends, too!
