willCode4Beer: Hovering thumbnail affliate links

Wednesday, July 19, 2006

Hovering thumbnail affliate links

I've added a little reading list to my site. Of course, I also made the links use the amazon affliate program.
Even though I tend to keep my site rather bland, I decided to add some little mouse-over goodness to the links.

In keeping with my general standard of trying to keep the html simple. I've created the following method.
<div style="affil">
<a href="amazonAffilLink">Get my book</a>
<iframe .... amazon image link stuff />
</div>

So, I can have some links like,

Effective Java

and

Bitter Java

That show the little amazon image ads when you mouse over them. Basically, the css keeps the amazon iframes hidden, and the javascript, looks for all of the elements and binds the events to them.

I've only tested with Firefox (Linux/Win2K), IE6, Opera 9 (Linux) and Konqueror, so YMMV. I'm assuming that if it works in Konqueror that it should work with Safari but, since I have no Mac, I can't t really know for sure. If it sucks, breaks, you just hate it or whatever, feel free to comment.

It works just using some css:

.affil {
   display: inline;
}
.affil iframe {
   display: none;
   position: absolute;
   width: 120px;
   height: 240px;
   margin: 0;
   padding: 0;
   border: 0;
   border: solid black 0px;
   overflow: hidden;
}

:
and some javascript:

function setAffilEvents(elem){
        arguments.callee.delayKey = 0;
        elem.onmouseover=function(){
                var left = this.offsetLeft;
                var top = this.offsetTop;
                var height = this.offsetHeight;
                var width = this.offsetWidth;
                var ifs = getTagsByName(this,"iframe");
                var lastEvent = setAffilEvents.delayOut;
                if(lastEvent && lastEvent!=this){
                        hideChildFrames(setAffilEvents.delayOut);
                }
                clearTimeout(setAffilEvents.delayKey);
                for(var i=0;i<ifs.length;i++){
                        var ifrm = ifs[i];
                        ifrm.style.display="block";
                        ifrm.style.top = (top + height-25) +"px";
                        ifrm.style.left = (left+width-30) + "px";
                }
        }
        elem.onmouseout=function(){
                setAffilEvents.delayOut = this;
                setAffilEvents.delayKey = setTimeout("setAffilEvents.hideElem();",500);
        }
        setAffilEvents.hideElem = function() {
                var elem2Hide = setAffilEvents.delayOut;
                if(elem2Hide){
                        hideChildFrames(elem2Hide);
                }
        }
}
function hideChildFrames(elem){
        var ifs = getTagsByName(elem,"iframe");
        for(var i=0;i<ifs.length;i++){
                ifs[i].style.display="none";
        }
}


function bindAffilEvents() {
        var afClass = "affil";
        var cnt = 0;
        var divs = getTagsByName(document.body,"div");
        for(var i=0; i<divs.length;>
                var div = divs[i];
                if(div.getAttribute("class")==afClass || div.getAttribute("className")==afClass){
                        setAffilEvents(div);
                }
        }
}
function getTagsByName(root,tagName){
        /* lowercase for xhtml proper */
        var elems = root.getElementsByTagName(tagName.toLowerCase());
        if(elems.length==0){
                /* Uppercase when html4 */
                elems = root.getElementsByTagName(tagName.toUpperCase());
        }
        return elems;
}
setTimeout("bindAffilEvents();",800);