Fading Links

asgsoft · 09-04-2005, 11:46

Have You ever seen a link that changes colour smoothly when the mouse goes over it and changes back smoothly to normat when the mouse goes of?

Well here is how to do it.

1- Open up note pad and enter in it the following:

PHP Code:

  // Fade-to colour without the # (6 character value only!)

var fadeTo = "ffaa22";

 
// Fade in colour increment/decrement by

var fiBy = 6;

 
// Fade out colour increment/decrement by

var foBy = 10;

 
// Speed - milliseconds between each colour change in the fade

// Less than 10ms doesn't really make all that much difference, so

// 10 is the minimum effective value.

var speed = 10;

 
// Class name of links to NOT fade (i.e. ignore)

// var ignoreClass = "somebogusvalue" if you don't want to

// use this feature. Alternatively, add onmouseover="clearFade()"

// to the link you do not wish to fade.

var ignoreClass = "ignore";

 
[b]// stop editing here[/b]

 
var opera, ie, dom, x = 0, oc, fader, ocs = new Array();

 
if (navigator.userAgent.indexOf("Opera") != -1) opera = true

else if (document.all && !opera) ie = true

else if (!document.all && document.getElementById) dom = true;

 
function convertRGB(z)

    {

        var newfcS = "", splitter = "";

        splitter = z.split(",");

        splitter[0] = parseInt(splitter[0].substring(4, splitter[0].length));

        splitter[1] = parseInt(splitter[1]);

        splitter[2] = parseInt(splitter[2].substring(0, splitter[2].length-1));

        for (var q = 0; q < 3; q++)

            {

                splitter[q] = splitter[q].toString(16);

                if (splitter[q].length == 1) splitter[q] = "0" + splitter[q];

                newfcS += splitter[q];

            }

        return newfcS;

    }

 
function currentColour(index)

    {

        var temp, cc;

        if (opera) cc = document.links[index].style.color

        else if (ie) cc = document.links[index].currentStyle.color

        else if (dom) cc = document.defaultView.getComputedStyle(document.links[index], '').getPropertyValue("color");

        if (cc.length == 4 && cc.substring(0, 1) == "#")

            {

                temp = "";

                for (var a = 0; a < 3; a++)

                    temp += cc.substring(a+1, a+2) + cc.substring(a+1, a+2);

                cc = temp;

            }

        else if (cc.indexOf("rgb") != -1) cc = convertRGB(cc)

        else if (cc.length == 7) cc = cc.substring(1, 7)

        else cc = fadeTo;

        return cc;

    }

 
 
function convert2Dec(hex)

    {    

        var rgb = new Array();

        for (var u = 0; u < 3; u++)

            rgb[u] = parseInt(hex.substring(u*2, u*2+2), 16);

        return rgb;

    }

 
function newRGB(f, n, d)

    {

        var change;

        if (d == 1) change = fiBy

        else change = foBy;

        for (var g = 0; g < 3; g++)

            {

                if (n[g] > f[g] && n[g] - change >= 0) n[g] -= change;

                if (n[g] < f[g] && n[g] + change <= 255) n[g] += change;

            }

        return n;

    }

 
function fade(index, d)

    {

        var fc, nc, temp = new Array(), finished = false;

        nc = convert2Dec(currentColour(index));

        if (d == 1) fc = convert2Dec(fadeTo)

        else fc = convert2Dec(ocs[x]);

        temp = convert2Dec(currentColour(index));

        nc = newRGB(fc, nc, d);

        if ((nc[0] == temp[0]) && (nc[1] == temp[1]) && (nc[2] == temp[2]))

            finished = true;

        if (!finished) document.links[x].style.color = "rgb(" + nc[0] + "," + nc[1] + "," + nc[2] + ")"

        else clearInterval(fader);

    }

 
function findLink(over)

    {

        if (document.layers) return;

        if (fader)

            {

                clearInterval(fader);

                document.links[x].style.color = "#" + ocs[x];

            }

        if (over && !this.id) this.id = over;

        x = 0;

        while (!(this.id == document.links[x].id) && (x < document.links.length))

            x++;

        if (this.id == document.links[x].id)

            {

                oc = currentColour(x);

                fader = setInterval("fade(" + x  + ", 1)", speed);

            }

    }

 
function clearFade()

    {

        if (document.layers) return;

        if (fader) clearInterval(fader);

        fader = setInterval("fade(" + x + ", 0)", speed);

    }

 
function init()

    {

        for (var i = 0; i < document.links.length; i++)

            {

                ocs[i] = currentColour(i);

                var currentOver = document.links[i].onmouseover;

                var currentOut = document.links[i].onmouseout;

                var ignoreIt = document.links[i].className == ignoreClass;

                if (!ignoreIt) document.links[i].id = "link" + i;

                if (!currentOver && !currentOut && !ignoreIt)

                    {

                        document.links[i].onmouseover = findLink;

                        document.links[i].onmouseout = clearFade;

                    }

            }        

}

 
if (opera || ie || dom) window.onload = init;

save it as fader.js
close
open up your webpage

in your body tage document add

HTML Code:

<script type="text/javascript" src="fader.js"></script>

<a href="#">Link 1 </a>

Check out http://asgsoft.hostmatrix.org/fader1.htm for similler effect.
If you need any help please do not hesitate to contact me
I am sorry but this effect might not work for all browsers.

Aaron · 09-04-2005, 13:12

Does this work with PHP-Nuke?

asgsoft · 09-04-2005, 13:53

i don't think it does but i have seen it with phpbb. but i am unable to do it so.

Zaltan · 16-04-2005, 11:31

I just noticed that that exact code is found at http://developers.evrsoft.com/forum/...hp/t-2301.html, yet you make no reference to anyone of who that script actually belongs to. On that site it is not known whether that is copyright or not, and I doubt that you are the actual author of that site.

Please do not use other peoples works, as copyrighting issues may cause problems for WebmasterTalk. (Like how you were told here and in other cases about copying others' tutorials/scripts.)

Aaron: This is JavaScript, not PHP (as you might assume by the "PHP Code" header), so even though I'm am not entirely sure of what PHP-Nuke is, I doubt that it wont work.

Aaron · 16-04-2005, 11:37

Quote:

Originally Posted by Zaltan

I just noticed that that exact code is found at http://developers.evrsoft.com/forum/...hp/t-2301.html, yet you make no reference to anyone of who that script actually belongs to. On that site it is not known whether that is copyright or not, and I doubt that you are the actual author of that site.

Please do not use other peoples works, as copyrighting issues may cause problems for WebmasterTalk. (Like how you were told here and in other cases about copying others' tutorials/scripts.)

Aaron: This is JavaScript, not PHP (as you might assume by the "PHP Code" header), so even though I'm am not entirely sure of what PHP-Nuke is, I doubt that it wont work.

I see.

PHP-Nuke is a COntent Management System, by the way.

Lewis · 14-06-2005, 17:50

did you know that the link to your site does not work.

09-04-2005, 11:46	#1 (permalink)
asgsoft WMT Addict Join Date: Apr 2005 Location: Brighton,UK Posts: 162 iTrader: 0 / 0%	Fading Links Have You ever seen a link that changes colour smoothly when the mouse goes over it and changes back smoothly to normat when the mouse goes of? Well here is how to do it. 1- Open up note pad and enter in it the following: PHP Code: // Fade-to colour without the # (6 character value only!) var fadeTo = "ffaa22"; // Fade in colour increment/decrement by var fiBy = 6; // Fade out colour increment/decrement by var foBy = 10; // Speed - milliseconds between each colour change in the fade // Less than 10ms doesn't really make all that much difference, so // 10 is the minimum effective value. var speed = 10; // Class name of links to NOT fade (i.e. ignore) // var ignoreClass = "somebogusvalue" if you don't want to // use this feature. Alternatively, add onmouseover="clearFade()" // to the link you do not wish to fade. var ignoreClass = "ignore"; [b]// stop editing here[/b] var opera, ie, dom, x = 0, oc, fader, ocs = new Array(); if (navigator.userAgent.indexOf("Opera") != -1) opera = true else if (document.all && !opera) ie = true else if (!document.all && document.getElementById) dom = true; function convertRGB(z) { var newfcS = "", splitter = ""; splitter = z.split(","); splitter[0] = parseInt(splitter[0].substring(4, splitter[0].length)); splitter[1] = parseInt(splitter[1]); splitter[2] = parseInt(splitter[2].substring(0, splitter[2].length-1)); for (var q = 0; q < 3; q++) { splitter[q] = splitter[q].toString(16); if (splitter[q].length == 1) splitter[q] = "0" + splitter[q]; newfcS += splitter[q]; } return newfcS; } function currentColour(index) { var temp, cc; if (opera) cc = document.links[index].style.color else if (ie) cc = document.links[index].currentStyle.color else if (dom) cc = document.defaultView.getComputedStyle(document.links[index], '').getPropertyValue("color"); if (cc.length == 4 && cc.substring(0, 1) == "#") { temp = ""; for (var a = 0; a < 3; a++) temp += cc.substring(a+1, a+2) + cc.substring(a+1, a+2); cc = temp; } else if (cc.indexOf("rgb") != -1) cc = convertRGB(cc) else if (cc.length == 7) cc = cc.substring(1, 7) else cc = fadeTo; return cc; } function convert2Dec(hex) { var rgb = new Array(); for (var u = 0; u < 3; u++) rgb[u] = parseInt(hex.substring(u2, u2+2), 16); return rgb; } function newRGB(f, n, d) { var change; if (d == 1) change = fiBy else change = foBy; for (var g = 0; g < 3; g++) { if (n[g] > f[g] && n[g] - change >= 0) n[g] -= change; if (n[g] < f[g] && n[g] + change <= 255) n[g] += change; } return n; } function fade(index, d) { var fc, nc, temp = new Array(), finished = false; nc = convert2Dec(currentColour(index)); if (d == 1) fc = convert2Dec(fadeTo) else fc = convert2Dec(ocs[x]); temp = convert2Dec(currentColour(index)); nc = newRGB(fc, nc, d); if ((nc[0] == temp[0]) && (nc[1] == temp[1]) && (nc[2] == temp[2])) finished = true; if (!finished) document.links[x].style.color = "rgb(" + nc[0] + "," + nc[1] + "," + nc[2] + ")" else clearInterval(fader); } function findLink(over) { if (document.layers) return; if (fader) { clearInterval(fader); document.links[x].style.color = "#" + ocs[x]; } if (over && !this.id) this.id = over; x = 0; while (!(this.id == document.links[x].id) && (x < document.links.length)) x++; if (this.id == document.links[x].id) { oc = currentColour(x); fader = setInterval("fade(" + x + ", 1)", speed); } } function clearFade() { if (document.layers) return; if (fader) clearInterval(fader); fader = setInterval("fade(" + x + ", 0)", speed); } function init() { for (var i = 0; i < document.links.length; i++) { ocs[i] = currentColour(i); var currentOver = document.links[i].onmouseover; var currentOut = document.links[i].onmouseout; var ignoreIt = document.links[i].className == ignoreClass; if (!ignoreIt) document.links[i].id = "link" + i; if (!currentOver && !currentOut && !ignoreIt) { document.links[i].onmouseover = findLink; document.links[i].onmouseout = clearFade; } } } if (opera \|\| ie \|\| dom) window.onload = init; save it as fader.js close open up your webpage in your body tage document add HTML Code: <script type="text/javascript" src="fader.js"></script> <a href="#">Link 1 </a> Check out http://asgsoft.hostmatrix.org/fader1.htm for similler effect. If you need any help please do not hesitate to contact me I am sorry but this effect might not work for all browsers.

14-06-2005, 17:50	#6 (permalink)
Lewis Super Moderator Recent Blog: [CaRP] XML error: Mismatched tag at line 6 - This appears to be an HTML webpage, not a feed. Join Date: Apr 2005 Location: Leics, UK Posts: 1,000 iTrader: 0 / 0%	did you know that the link to your site does not work. __________________ NewsBarrel.com Everything is banal and jejune, There is a planetary conspiracy against the likes of you and me in this idiot constituency of the moon, Well, he knew exactly who to blame, And we call upon the author to explain.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Fading Images	asgsoft	Website Design Articles	23	08-08-2005 19:15
Fading colours???	Lewis	Website Design Forum	2	27-06-2005 05:26

09-04-2005, 13:12	#2 (permalink)
Aaron WMT Addict Join Date: Apr 2005 Location: Singapore Posts: 238 iTrader: 0 / 0%	Does this work with PHP-Nuke?

09-04-2005, 13:53	#3 (permalink)
asgsoft WMT Addict Join Date: Apr 2005 Location: Brighton,UK Posts: 162 iTrader: 0 / 0%	i don't think it does but i have seen it with phpbb. but i am unable to do it so.

16-04-2005, 11:31	#4 (permalink)
Zaltan Newbie Join Date: Apr 2005 Posts: 13 iTrader: 0 / 0%	I just noticed that that exact code is found at http://developers.evrsoft.com/forum/...hp/t-2301.html, yet you make no reference to anyone of who that script actually belongs to. On that site it is not known whether that is copyright or not, and I doubt that you are the actual author of that site. Please do not use other peoples works, as copyrighting issues may cause problems for WebmasterTalk. (Like how you were told here and in other cases about copying others' tutorials/scripts.) Aaron: This is JavaScript, not PHP (as you might assume by the "PHP Code" header), so even though I'm am not entirely sure of what PHP-Nuke is, I doubt that it wont work.

Fading Links

Fading Links

Similar Threads