Link Hover Code (fading links, phpBB mod + code)

[stpmatts]

On the default forum skin, what is the code to make the links fade to orange? I've looked for this but couldn't find it. And if it is possible to do this through Dreamweaver, that would help out even more.

Thanks.

[Plasma2002b]

On the default forum skin, what is the code to make the links fade to orange? I've looked for this but couldn't find it. And if it is possible to do this through Dreamweaver, that would help out even more.

Thanks.

STP.... you can do this in javascript..... just put this in a js file or in the head to your file.....


also, make your links to have no underline (just looks better... you can mess around with the settings)




startColor = "#000000";
endColor = "#ffffff";
stepIn = 20;
stepOut = 20;
autoFade = true;
sloppyClass = false;


hexa = new makearray(16);
for(var i = 0; i < 10; i++)
hexa = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

document.onmouseover = domouseover;
document.onmouseout = domouseout;

startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());

var fadeId = new Array();

function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i<7; i++){
for (j=0; j<16; j++){
if (Color.charAt(i) == hexa[j]){
if (i%2 !=0)
colorArr[Math.floor((i-1)/2)]=eval(j)*16;
else
colorArr[Math.floor((i-1)/2)]+=eval(j);
}
}
}
return colorArr;
}

function domouseover() {
if(document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
fade(startColor,endColor,srcElement.uniqueID,stepIn);
}
}

function domouseout() {
if (document.all){
var srcElement = event.srcElement;
if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
fade(endColor,startColor,srcElement.uniqueID,stepOut);
}
}

function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this = 0;
return this;
}

function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];}

function setColor(r, g, b, element) {
var hr = hex(r); var hg = hex(g); var hb = hex(b);
element.style.color = "#"+hr+hg+hb;
}

function fade(s,e, element,step){
var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];

if (fadeId[0] != null && fade[0] != element){
setColor(sr,sg,sb,eval(fadeId[0]));
var i = 1;
while(i < fadeId.length){
clearTimeout(fadeId);
i++;
}
}

for(var i = 0; i <= step; i++) {
fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
}
fadeId[0] = element;
}

[stpmatts]

Thanks a lot.

[Big-O Ryan]

There's a phpBB mod for this (fading links) at phpbb.com's mod section.

[lunatic]

heh i like dat idea... i make web pages, this is the first time i really noticed that... well i use flash almost all the time for my links and stuff so... well thanks for the code plasma... and ryan for the mod info.

[Michael]

It's not JS, you can do it through style sheets too. Set up a style sheet in the header of your HTML document, then use this code:

Code: Select all

A:hover {text-decoration:none; color:color}

(For color, you can use a word such as red, green, etc., or a 6-digit hexadecimal code.

[lunatic]

It's not JS, you can do it through style sheets too. Set up a style sheet in the header of your HTML document, then use this code:

Code: Select all

A:hover {text-decoration:none; color:color}

(For color, you can use a word such as red, green, etc., or a 6-digit hexadecimal code.

dat works too... may b i'll use dat sometime... well thx michael...


~1~

[Master Jedi]

It's not JS, you can do it through style sheets too. Set up a style sheet in the header of your HTML document, then use this code:

Code: Select all

A:hover {text-decoration:none; color:color}

(For color, you can use a word such as red, green, etc., or a 6-digit hexadecimal code.

Why stop there? You can put any style in there that links support:

A:hover {text-decoration:none; color:white;background-color:black;font-family:arial;font-weight:bold;text-indent:200px}

[lunatic]

It's not JS, you can do it through style sheets too. Set up a style sheet in the header of your HTML document, then use this code:

Code: Select all

A:hover {text-decoration:none; color:color}

(For color, you can use a word such as red, green, etc., or a 6-digit hexadecimal code.

Why stop there? You can put any style in there that links support:

A:hover {text-decoration:none; color:white;background-color:black;font-family:arial;font-weight:bold;text-indent:200px}

now dat helps out a whole lot more... thx everyone...


~1~

[Michael]

Why stop there? You can put any style in there that links support:

A:hover {text-decoration:none; color:white;background-color:black;font-family:arial;font-weight:bold;text-indent:200px}

True, you can put any text formatting in the tag, but it is a bad idea to make links change to bold or alter the indent on a hover.

[Master Jedi]

Why stop there? You can put any style in there that links support:

A:hover {text-decoration:none; color:white;background-color:black;font-family:arial;font-weight:bold;text-indent:200px}

True, you can put any text formatting in the tag, but it is a bad idea to make links change to bold or alter the indent on a hover.

I know, it was just an example.