[JavaScript] Fading affliliate links.

**Sean** · 03-13-2004, 10:03 AM

This is a a very simple code to allow your affiliate buttons to be at 20% alpha (trasparent), and then when hovered on with the mouse cursor they fade up too 100%

Ok here is the whole code:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>Untitled Document</TITLE>
<SCRIPT LANGUAGE="javascript">
nereidFadeObjects = new Object();

nereidFadeTimers = new Object();

function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
if (object != "[object]"){ //do this so I can take a string too

setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
return;
}

clearTimeout(nereidFadeTimers[object.sourceIndex]);

diff = destOp-object.filters.alpha.opacity;
direction = 1;
if (object.filters.alpha.opacity > destOp){
direction = -1;
}
delta=Math.min(direction*diff,delta);
object.filters.alpha.opacity+=direction*delta;

if (object.filters.alpha.opacity != destOp){
nereidFadeObjects[object.sourceIndex]=object;

nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}

if (document.images) {

var offimg = new Array()
offimg["cool"] = new Image(120,50)
offimg["cool"].src = "[INSERT]"

function imageOn(imgName) {
if (document.images) {
document.images[imgName].src = onimg[imgName].src
}
}

function imageOff(imgName) {
if (document.images) {
document.images[imgName].src = offimg[imgName].src
}
}

function setMsg(msg) {
window.status = msg
return true
}

function playIt() {
}
}
</Script>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
<a href="http://www.griffin-webpages.com" target="_blank"><img border="0" src="http://www.griffin-webpages.com/affiliates/griffin2.jpg" style="filter:alpha(opacity=20)" onmouseover="nereidFade(this,100,30,10)" onmouseout="nereidFade(this,30,50,5)" border="0" width="88" height="31"></a>

</BODY>
</HTML>