I love the Amazon Associate program. I’m a member and I even buy stuff
from myself to get a kickback. It’s also a good place to send people
when you want to show them books, music, movies, etc., that you’re
talking about. Sort of like a database of “stuff.”
One of the beauties of the way Amazon set their stuff up is that
everything is standardized - link formats, image naming, etc.
Everything. Which means, of course, that people outside Amazon can
interface with their stuff pretty easily. Good for them, good for us.
I integrated Associate links into my blogging program (pMachine) so I
only have to enter the ASIN for an item and it builds the link for me. I
wanted to take that one step further, though, so I present to you:
Amazon Affiliate DHTML Image Tooltips!
The idea is this: Hover your cursor over any Amazon Associate link to a
product and get a picture of the item right there in the tooltip. How
sweet is that?
It doesn’t even require any change to your page structure, which is
what I really dig. Just add a straight-up Amazon Associate link to your
page like you usually do:
<a href="http://www.amazon.com/exec/obidos/ASIN/1234567890/myaffiliateid">A Cool Product</a>
Then add a reference to the script at the head of the page:
<script type="text/javascript" src="dhtmltooltip.js"></script>
The script will automatically rewrite all of the Amazon Associate links
in the page (that are in the correct format, as noted above) on the fly
for you with the correct events and everything.
(It will also do text tooltips - it’s a modification to the Dynamic
Drive “Cool Tooltip”
script.)
It all ends up looking like this:

The download includes:
- dhtmltooltip.js - The actual script that performs the DHTML and link
rewrites. Information on usage is included in the header of the
script.
- test.html - A test page illustrating the script usage (both Amazon
Associate and text tooltips).
Note: Since the original release of this DHTML tooltip script, Amazon
has released their own “link-enhancer” script that performs a similar
functionality but in a more robust fashion, adding product description
information and so forth to the tooltip. This DHTML tooltip script has
been updated to work in conjunction with that, not modifying links that
the Amazon script has already modified. As such, previous users of this
script can easily add the use of the Amazon script to their site without
worrying about clashing tooltips appearing. Amazon modified links appear
correctly; those not modified by Amazon or explicitly using this DHTML
tooltip script will continue to function as usual.
I’ve tested it in IE 6.0 and Firefox 1.0, which I think covers most of
the people who show up to my site. I’m sure it’ll work with most any
up-level browser, though if someone finds it doesn’t work on a
particular browser, tell me how to fix it and I will.
Like it? Want it? Here you go!
Download Amazon Associate DHTML Image Tooltips Script 2.1 (.zip
file)
Version History:
2.1: Added support to allow co-existing with Amazon “link-enhancer”
script. The DHTMLToolTip will not be added to links that have been
“enhanced” by the Amazon script.
2.0:
Converted to “object oriented” JavaScript to avoid name clashes.
Fixed minor bug with positioning in newer browsers.
Safely attaching to all events (thanks to Phil Haack for this).
Updated so script is placed in HEAD of document.
1.0: First release.