Setting up the ad is awkward, as the HTML snippet I am instructed to embed is:
<a href="http://www.amazon.com/gp/product/1449381871?As I have highlighted in red, the source of the first image is a relative URL. That means you have to host the image yourself in order for this to work. Amazon has instructions that tell you as much:
<img border="0" src="517mVDCbOtL._SL160_.jpg">
width="1" height="1" border="0" alt=""
style="border:none !important; margin:0px !important;" />
IMPORTANT: Save this image to your server, then cut and paste the HTML code in the lower left textbox into your web page.
But...why? I can think of three possible reasons:
- Amazon is too cheap to host the image themselves.
- Amazon is being dumb.
(Another nit: one of the image tags is self-closing while the other is not. Is Amazon trying to embed HTML or XHTML? I don't really care which, I'd just like them to be consistent!)
The image that Amazon provided me with was small and grainy, so I decided to use a different book cover image that I cropped from O'Reilly's web site (that is why it still has the Rough Cuts branding on it). At 56K, I really need to use Pngcrush, but I'll save that task for another day. By changing the source of the image tag from 517mVDCbOtL._SL160_.jpg to http://plovr.com/cover.png and embedding the HTML, everything seems to work just fine.
Except...then I wanted to enable the fancy Product Previews feature that enables a user to mouse over the book cover to get a hovercard with more product details. I followed the instructions and added the script tag to enable Product Previews on my page:
- On Firefox, the script works as intended.
- On IE 8, the hovercard appears briefly, triggering the progress bar. Once the progress bar finishes loading, the hovercard disappears again.
- On Webkit-based browsers (i.e., both Chrome and Safari), the hovercard appears, but it is empty. When I inspect it, the hovercard appears to contain an iframe with all of the appropriate content, except the CSS of the iframe is
visibility:hidden, which is why nothing is displayed.
document.write(), so it must be executed while the page is still being written.
For a company like Amazon, this is pretty pathetic. Again, they need to:
- Host the images for their products so the HTML snippet is easier to embed.
- Clean up the HTML snippet so it is consistent with its use of closing tags.
- Get a higher quality image for the cover of my book!