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,
and
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);Not too much to it.
Files:
- affil.css
- The style sheet for this project
- affil.css
- affil.js
- The javascript file to find the divs and bind the events
- affil.js
