/******************************************************************************
* DHTML Tooltips with Amazon Referral Link Image
* by Travis Illig
* updated by mitcho@mitcho.com
* based on the DHTML tooltip script from Dynamic Drive (copyright notice below).
*
* Rewrites links of the form
*
* text
*
* to have a hovering tooltip displaying a small image of the item referred to.
* Works for www.amazon.co.uk or any other www.amazon.* server. The images will
* all be taken from the server referred to in the constants section of the
* code, below (which should be fine for people of all locales).
*
* To use, just add a reference to this script to the of the page:
*
*
* The script will automatically rewrite all referral links with tooltips.
*
* You can also provide text-based tooltips using the DHTMLToolTipProvider object,
* "ShowTip," and "HideTip" on links. A simple version looks like this:
*
* Google
*
* A more complex version looks like this:
*
* eBay
*
*
* VERSION HISTORY
* 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: Original version.
******************************************************************************/
/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function DHTMLToolTip(){
// Configuration settings
this.AmazonImageServer = "images.amazon.com"; // Server where Amazon images will come from
this.DefaultBackgroundColor = "#fff"; // Default background color of tool tips
this.OffsetXPoint = -60; // X offset of tooltips
this.OffsetYPoint = 20; // Y offset of tooltips
// Method declarations
this.AttachDocumentOnMouseMove = AttachDocumentOnMouseMove;
this.AttachLinkOnMouseOut = AttachLinkOnMouseOut;
this.AttachLinkOnMouseOver = AttachLinkOnMouseOver;
this.AttachWindowOnLoad = AttachWindowOnLoad;
this.CreateToolTipDiv = CreateToolTipDiv;
this.GetAmazonImageSource = GetAmazonImageSource;
this.GetBody = GetBody;
this.GetPositioningElement = GetPositioningElement;
this.GetToolTipObject = GetToolTipObject;
this.HideTip = HideTip;
this.Initialize = Initialize;
this.IsToolTipCompatibleBrowser = IsToolTipCompatibleBrowser;
this.PositionTip = PositionTip;
this.RewriteAmazonLinksWithTooltips = RewriteAmazonLinksWithTooltips;
this.ShowAmazonImgTooltip = ShowAmazonImgTooltip;
this.ShowTip = ShowTip;
// Environment and variables
this.EnableTip = false;
this.Initialized = false;
this.IsIE = false;
this.IsNS6 = false;
this.ToolTipObject = null;
this.ToolTipObjectID = "DDRIVE_dhtmltooltip";
// Adds the tooltip pane with requisite styling;
// Update styling here as needed.
function CreateToolTipDiv(){
var div = document.createElement("div");
div.id = DHTMLToolTipProvider.ToolTipObjectID;
div.style.position = 'absolute';
div.style.width = '150px';
div.style.border = '3px double black';
div.style.padding = '2px;';
div.style.backgroundColor = DHTMLToolTipProvider.DefaultBackgroundColor;
div.style.visibility = 'hidden';
div.style.zindex = '100';
div.style.filter = 'progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135)';
DHTMLToolTipProvider.GetBody().appendChild(div);
return div;
}
// Attaches an event handler to document.onmousemove
function AttachDocumentOnMouseMove(func){
var oldonmm = document.onmousemove;
if (typeof document.onmousemove != 'function'){
document.onmousemove = func;
}
else {
document.onmousemove = function(){
oldonmm();
func();
}
}
}
// Attaches an event handler to link.onmouseover
function AttachLinkOnMouseOver(thelink, func){
var oldonmo = thelink.onmouseover;
if (typeof thelink.onmouseover != 'function'){
thelink.onmouseover = func;
}
else {
thelink.onmouseover = function(){
oldonmo();
func();
}
}
}
// Attaches an event handler to link.onmouseout
function AttachLinkOnMouseOut(thelink, func){
var oldonmo = thelink.onmouseout;
if (typeof thelink.onmouseout != 'function'){
thelink.onmouseout = func;
}
else {
thelink.onmouseout = function(){
oldonmo();
func();
}
}
}
// Attaches an event handler to window.onload
function AttachWindowOnLoad(func){
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
}
else {
window.onload = function(){
oldonload();
func();
}
}
}
// Parses an Amazon referral URL and gets the associated image URL (empty string if N/A)
function GetAmazonImageSource(amazonUrl){
var amazonImgSrc = "";
var AmazonLinkMatches = amazonUrl.match(/^http:\/\/www\.amazon\.[^\/]+\/o\/ASIN\/([\w\d]{10})\/ref=nosim\/[-\w\d]+$/i);
if(AmazonLinkMatches && AmazonLinkMatches.length > 1){
amazonImgSrc = "http://" + DHTMLToolTipProvider.AmazonImageServer + "/images/P/" + AmazonLinkMatches[1] + ".01.MZZZZZZZ.jpg"
}
return amazonImgSrc;
}
// Gets the body element of the document
function GetBody(){
return document.body ? document.body : document.documentElement;
}
// Gets the element that positions should be calculated from
function GetPositioningElement(){
return document.documentElement ? document.documentElement : document.body
}
// Retrieves the tool tip object from the document
function GetToolTipObject(){
if(DHTMLToolTipProvider.IsToolTipCompatibleBrowser()){
return document.all ? document.all[DHTMLToolTipProvider.ToolTipObjectID] : document.getElementById ? document.getElementById(DHTMLToolTipProvider.ToolTipObjectID) : "";
}
return null;
}
// Hides the tooltip pane
function HideTip(e){
if(DHTMLToolTipProvider.IsToolTipCompatibleBrowser()){
DHTMLToolTipProvider.EnableTip = false;
DHTMLToolTipProvider.ToolTipObject.style.visibility = "hidden";
DHTMLToolTipProvider.ToolTipObject.style.left = "-1000px";
DHTMLToolTipProvider.ToolTipObject.style.backgroundColor = DHTMLToolTipProvider.DefaultBackgroundColor;
DHTMLToolTipProvider.ToolTipObject.style.width = '';
}
}
// Initializes the tool tip provider
function Initialize(){
if(DHTMLToolTipProvider.Initialized){
return;
}
if(document.all){
DHTMLToolTipProvider.IsIE = true;
}
else if(document.getElementById){
DHTMLToolTipProvider.IsNS6 = true;
}
DHTMLToolTipProvider.CreateToolTipDiv();
DHTMLToolTipProvider.ToolTipObject = DHTMLToolTipProvider.GetToolTipObject();
DHTMLToolTipProvider.RewriteAmazonLinksWithTooltips();
DHTMLToolTipProvider.AttachDocumentOnMouseMove(DHTMLToolTipProvider.PositionTip);
DHTMLToolTipProvider.Initialized = true;
}
// Determines if the current browser can display the tool tip.
function IsToolTipCompatibleBrowser(){
if(DHTMLToolTipProvider.IsIE || DHTMLToolTipProvider.IsNS6){
return true;
}
return false;
}
// Positions the tooltip pane
function PositionTip(e){
if(DHTMLToolTipProvider.IsToolTipCompatibleBrowser() && DHTMLToolTipProvider.EnableTip){
var curX = (DHTMLToolTipProvider.IsNS6) ? e.pageX : event.x + DHTMLToolTipProvider.GetPositioningElement().scrollLeft;
var curY = (DHTMLToolTipProvider.IsNS6) ? e.pageY : event.y + DHTMLToolTipProvider.GetPositioningElement().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge = DHTMLToolTipProvider.IsIE && !window.opera ? DHTMLToolTipProvider.GetPositioningElement().clientWidth - event.clientX-DHTMLToolTipProvider.OffsetXPoint : window.innerWidth - e.clientX - DHTMLToolTipProvider.OffsetXPoint - 20;
var bottomedge = DHTMLToolTipProvider.IsIE && !window.opera ? DHTMLToolTipProvider.GetPositioningElement().clientHeight - event.clientY-DHTMLToolTipProvider.OffsetYPoint : window.innerHeight - e.clientY - DHTMLToolTipProvider.OffsetYPoint - 20;
var leftedge = (DHTMLToolTipProvider.OffsetXPoint < 0) ? DHTMLToolTipProvider.OffsetXPoint * (-1) : -1000;
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge < DHTMLToolTipProvider.ToolTipObject.offsetWidth){
//move the horizontal position of the menu to the left by it's width
DHTMLToolTipProvider.ToolTipObject.style.left = DHTMLToolTipProvider.IsIE ? DHTMLToolTipProvider.GetPositioningElement().scrollLeft + event.clientX - DHTMLToolTipProvider.ToolTipObject.offsetWidth + "px" : window.pageXOffset + e.clientX-DHTMLToolTipProvider.ToolTipObject.offsetWidth + "px";
}
else if (curX < leftedge){
DHTMLToolTipProvider.ToolTipObject.style.left = "5px";
}
else{
//position the horizontal position of the menu where the mouse is positioned
DHTMLToolTipProvider.ToolTipObject.style.left = curX + DHTMLToolTipProvider.OffsetXPoint + "px";
}
//same concept with the vertical position
if (bottomedge < DHTMLToolTipProvider.ToolTipObject.offsetHeight){
DHTMLToolTipProvider.ToolTipObject.style.top = DHTMLToolTipProvider.IsIE ? DHTMLToolTipProvider.GetPositioningElement().scrollTop + event.clientY - DHTMLToolTipProvider.ToolTipObject.offsetHeight - DHTMLToolTipProvider.OffsetYPoint + "px" : window.pageYOffset + e.clientY - DHTMLToolTipProvider.ToolTipObject.offsetHeight - DHTMLToolTipProvider.OffsetYPoint + "px";
}
else{
DHTMLToolTipProvider.ToolTipObject.style.top = curY + DHTMLToolTipProvider.OffsetYPoint + "px";
}
DHTMLToolTipProvider.ToolTipObject.style.visibility = "visible";
}
}
// Rewrites the links in the document to provide image tooltips for Amazon referral links
function RewriteAmazonLinksWithTooltips(){
for(i = 0; i < document.links.length; i++){
var amazonImgSrc = DHTMLToolTipProvider.GetAmazonImageSource(document.links[i].href);
if(amazonImgSrc != ""){
DHTMLToolTipProvider.AttachLinkOnMouseOver(document.links[i], DHTMLToolTipProvider.ShowAmazonImgTooltip);
DHTMLToolTipProvider.AttachLinkOnMouseOut(document.links[i], DHTMLToolTipProvider.HideTip);
// Preload all images
var imgLoad = new Image();
imgLoad.src = amazonImgSrc;
}
}
}
// Shows a tooltip with an Amazon product image in it
function ShowAmazonImgTooltip(e){
if (!e) var e = window.event;
// Get the event target
var targ;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
// We have to act on a link, so go up through the DOM tree until we get one
var docElement = DHTMLToolTipProvider.GetBody();
while(targ != docElement && targ.nodeName.toLowerCase() != "a"){
targ = targ.parentNode;
}
// We never got a link
if(targ == docElement){
return false;
}
// We got a link; show the tooltip
var imgurl, thecolor, thewidth;
if (DHTMLToolTipProvider.IsToolTipCompatibleBrowser()){
var amazonImgSrc = DHTMLToolTipProvider.GetAmazonImageSource(targ.href);
if(amazonImgSrc != ""){
var img = new Image();
img.src = amazonImgSrc;
DHTMLToolTipProvider.ToolTipObject.innerHTML = '
';
DHTMLToolTipProvider.ToolTipObject.style.width = img.width + "px";
DHTMLToolTipProvider.EnableTip = true;
return false;
}
}
}
// Shows a tooltip
function ShowTip(thetext, thecolor, thewidth){
if(DHTMLToolTipProvider.IsToolTipCompatibleBrowser()){
if(typeof thewidth != "undefined"){
DHTMLToolTipProvider.ToolTipObject.style.width = thewidth + "px";
}
else{
DHTMLToolTipProvider.ToolTipObject.style.width = "";
}
if (typeof thecolor != "undefined" && thecolor != ""){
DHTMLToolTipProvider.ToolTipObject.style.backgroundColor = thecolor;
}
DHTMLToolTipProvider.ToolTipObject.innerHTML = thetext;
DHTMLToolTipProvider.EnableTip = true;
return false;
}
}
}
var DHTMLToolTipProvider = new DHTMLToolTip();
DHTMLToolTipProvider.AttachWindowOnLoad(DHTMLToolTipProvider.Initialize);