Recently inspired by a trip through Pragmatic Ajax
and a look at Phil Haack's XFN Highlighter Script
and create a little pop-up contact information script.
What this allows you to do is specify the contact information for a given person including their name, email address, web site URL, a short description of them, and their Xbox Live Gamertag and have the contact info pop up automatically when you put your cursor over a link describing them.
Rather than talk about it, let me show you (click for a demo page)
To use it, you need to add the prototype library and the ContactCard library to the <head /> of your page. Then you define your list of contacts and related information in a separate script and add that - whenever you need to add, remove, or change contact info, you then just modify that separate script.
By adding the CSS class
followed by a period and the ID of the given contact, the ContactCard script will automatically rewrite the page with the popup. If it's a link, including XFN relationship information will automatically have that added to the contact card:
<a href="http://www.paraesthesia.com" rel="me" class="contactcard.tillig">Travis Illig</a>
This works on any HTML element, not just links:
<span class="contactcard.tillig">Travis Illig</span>
The script will also automatically find links that have URLs matching those you have defined for contacts and will attach a contact's card to those links without you having to do anything. (You can disable this behavior if you want.)
Full usage instructions, including how to customize the look of the popup card, are included. Check out the test page that is included for working examples.
Download ContactCard 1.2.0
Added support for rendering XFN information for a link without having contact info attached.
Fixed positioning bug.
1.2.0: Added option to automatically rewrite links that match the URL for a contact. Enabled by default.