Link Fader test

Discussion in 'Digital Marketing' started by topsites, Mar 24, 2006.

  1. topsites

    topsites LawnSite Fanatic
    Posts: 21,653

    sorry it doesn't work ...

    - snip -
     
  2. mdvaden

    mdvaden LawnSite Bronze Member
    Posts: 1,946

    What was it supposed to do?
     
  3. topsites

    topsites LawnSite Fanatic
    Posts: 21,653

    Make links fade with color as a mouse passes over it.
    (not safe for work) I got it working on my hobby site here:
    (just pass the mouse over some links - more than one at a time)
    (not safe for work) http://atopqualitysite.com/ (not safe for work)

    I'll just paste the code here, but you can NOT use the css link-attribute 'hover' because it will cause a browser error,
    anyway here goes:

    it's not actually mine, I found it someplace ;)
    (modifiable: LinkEndColor and LinkStartColor)

    And no the code is NOT php it is HTML (javascript) but it would only show correct within php tags here (html tags added a bunch of weird characters)

    PHP:
    <script language="JavaScript"
             
    type="text/javascript">
    <!--
    if(!
    window.JSFX)JSFX=new Object();

    var 
    LinkFadeInStep=20;
    var 
    LinkFadeOutStep=5;
    var 
    LinkEndColor="FF9900";

    var 
    LinkStartColor="00FFFF";
    var 
    LinkFadeRunning=false;

    document.onmouseover theOnOver;
    document.onmouseout  theOnOut;
    if(
    document.captureEvents)
        
    document.captureEvents(Event.MOUSEOVER Event.MOUSEOUT);

    function 
    hex2dec(hex){return(parseInt(hex,16));}
    function 
    dec2hex(dec){return (dec 16 "0" "") + dec.toString(16);} 
    function 
    getColor(startendpercent)
    {

        var 
    r1=hex2dec(start.slice(0,2));

        var 
    g1=hex2dec(start.slice(2,4));
        var 
    b1=hex2dec(start.slice(4,6));

        var 
    r2=hex2dec(end.slice(0,2));
        var 
    g2=hex2dec(end.slice(2,4));
        var 
    b2=hex2dec(end.slice(4,6));

        var 
    pc=percent/100;

        var 
    r=Math.floor(r1+(pc*(r2-r1)) + .5);
        var 
    g=Math.floor(g1+(pc*(g2-g1)) + .5);
        var 
    b=Math.floor(b1+(pc*(b2-b1)) + .5);

        return(
    "#" dec2hex(r) + dec2hex(g) + dec2hex(b));
    }

    JSFX.getCurrentElementColor = function(el

        var 
    result LinkStartColor;

        if (
    el.currentStyle
            
    result = (el.currentStyle.color); 
        else if (
    document.defaultView
            
    result = (document.defaultView.getComputedStyle(el,'').getPropertyValue('color'));
        else if(
    el.style.color)
            
    result el.style.color;

        if(
    result.charAt(0) == "#")
            
    result result.slice(18);
        else if(
    result.charAt(0) == "r")
        {
            var 
    v1 result.slice(result.indexOf("(")+1result.indexOf(")") );

            var 
    v2 v1.split(",");
            
    result = (dec2hex(parseInt(v2[0])) + dec2hex(parseInt(v2[1])) + dec2hex(parseInt(v2[2])));
        }

        return 
    result;

    JSFX.findTagIE = function(el)
    {
          while (
    el && el.tagName != 'A')
                
    el el.parentElement;
        return(
    el);
    }
    JSFX.findTagNS= function(el)
    {
          while (
    el && el.nodeName != 'A')
                
    el el.parentNode;
        return(
    el);
    }
    function 
    theOnOver(e)
    {
        var 
    lnk;
        if(
    window.event)
            
    lnk=JSFX.findTagIE(event.srcElement);
        else
            
    lnk=JSFX.findTagNS(e.target);

        if(
    lnk)
            
    JSFX.linkFadeUp(lnk);
    }
    JSFX.linkFadeUp = function(lnk)
    {
        if(
    lnk.state == null)

        {
            
    lnk.state "OFF";
            
    lnk.index 0;
            
    lnk.startColor JSFX.getCurrentElementColor(lnk);
            
    lnk.endColor LinkEndColor;
        }

        if(
    lnk.state == "OFF")
        {
            
    lnk.state "FADE_UP";
            
    JSFX.startLinkFader();
        }
        else if( 
    lnk.state == "FADE_UP_DOWN"
            
    || lnk.state == "FADE_DOWN")
        {
            
    lnk.state "FADE_UP";
        }
    }
    function 
    theOnOut(e)
    {
        var 
    lnk;
        if(
    window.event)
            
    lnk=JSFX.findTagIE(event.srcElement);
        else
            
    lnk=JSFX.findTagNS(e.target);

        if(
    lnk)
            
    JSFX.linkFadeDown(lnk);
    }
    JSFX.linkFadeDown = function(lnk)
    {
        if(
    lnk.state=="ON")

        {
            
    lnk.state="FADE_DOWN";
            
    JSFX.startLinkFader();
        }
        else if(
    lnk.state == "FADE_UP")
        {
            
    lnk.state="FADE_UP_DOWN";
        }
    }
    JSFX.startLinkFader = function()
    {
        if(!
    LinkFadeRunning)
            
    JSFX.LinkFadeAnimation();
    }

    JSFX.LinkFadeAnimation = function()
    {
        
    LinkFadeRunning false;
        for(
    i=i<document.links.length i++)
        {
            var 
    lnk document.links[i];
            if(
    lnk.state)
            {
                if(
    lnk.state == "FADE_UP")
                {
                    
    lnk.index+=LinkFadeInStep;
                    if(
    lnk.index 100)
                        
    lnk.index 100;
                    
    lnk.style.color=getColor(lnk.startColorlnk.endColorlnk.index);

                    if(
    lnk.index == 100)
                        
    lnk.state="ON";

                    else
                        
    LinkFadeRunning true;
                }
                else if(
    lnk.state == "FADE_UP_DOWN")
                {
                    
    lnk.index+=LinkFadeOutStep;
                    if(
    lnk.index>100)
                        
    lnk.index 100;
                    
    lnk.style.color=getColor(lnk.startColorlnk.endColorlnk.index);

                    if(
    lnk.index == 100)
                        
    lnk.state="FADE_DOWN";
                    
    LinkFadeRunning true;
                }
                else if(
    lnk.state == "FADE_DOWN")
                {
                    
    lnk.index-=LinkFadeOutStep;
                    if(
    lnk.index<0)
                        
    lnk.index 0;
                    
    lnk.style.color=getColor(lnk.startColorlnk.endColorlnk.index);
        
                    if(
    lnk.index == 0)
                        
    lnk.state="OFF";
                    else
                        
    LinkFadeRunning true;
                }
            }
        }

        if(
    LinkFadeRunning)
            
    setTimeout("JSFX.LinkFadeAnimation()"40);
    }

    //--> 
    </script>
     
  4. mdvaden

    mdvaden LawnSite Bronze Member
    Posts: 1,946

    It's a totally different thing, but have you seen the script on dynamic drive dot com to "suck" the links out of a page?

    In other words, suppose I'd like you to go to my links page and be able to get every hyperling on the page with the click of a button. That's what it's about.

    You put a code on a page, and it dispays a button or line to click, and every link on the page is read and isolated to copy and use.
     

Share This Page