Javascript na odkazy

pOw3r

Pekny den ... potreboval by som najst skript(niesom si isty ci je to skript:?) pri ktorom po prejdeni cez odkaz by bol prechod farby plynuly ... aj by zmizol ten prechod plynulo. Staci nazov toho skriptu ... alebo link ... popripade zdrojovy kod. Dakujem vopred.

zaggi

riesilo sa to tu: http://www.hojko.com/css-linky-t93444.html ale ten .js subor uz na tom servri nie je ... mozno ho mam doma niekde na disku ale pochybujem

pOw3r

no skus to pohladat ked nie skusim to najst niekde na nete ... diks za radu ... v tych topicoch sa nevyzna ani boh ked tam daju nazov CSS LINKY

... co som od zaciatku vedel ze css to nie je

zaggi

10 minut prace a da sa to napisat, staci trochu chciet

edit: nova verzia, zistil som ze v opere to povodne neslapalo

Kód: Vybrať všetko

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Link Fading Demo by Zaggi</title>
        <script type="text/javascript">
            var COLOR1 = "0,0,0";
            var COLOR2 = "255,0,0";
            var COLORCONSTANT = 5;
            var TIMECONSTANT = 10;
            
            function init()
            {
                var links = document.getElementsByTagName("a");
                for (var i = 0; i < links.length; i++) 
                {
                    links[i].style.color = "rgb(" + COLOR1 + ")";
                    links[i].onmouseover = function()
                    {
                        // tricky, this bude element na ktorom bezi funkcia ... 
                        this.style.color = "rgb(" + COLOR2 + ")";
                    }
                    links[i].onmouseout = function()
                    {
                        setTimeout(createDelegate(this, fadeTo, [COLOR1]), TIMECONSTANT);
                    }
                }
            }
            
            function createDelegate(obj, func, args)
            {
                return function()
                {
                    func.apply(obj, args)
                };
            }
            
            //opera...
            function cutHex(h){return (h.charAt(0) == "#") ? h.substring(1, 7) : h}            
            function HexToR(h){return parseInt((cutHex(h)).substring(0, 2), 16)}            
            function HexToG(h){return parseInt((cutHex(h)).substring(2, 4), 16)}            
            function HexToB(h){return parseInt((cutHex(h)).substring(4, 6), 16)}
            
            function fadeTo(toColor)
            {
                var thisColor = this.style.color;
                thisColor = thisColor.substring(thisColor.indexOf("(") + 1, thisColor.indexOf(")"));
                
                var exit = true;
                var thisColors = thisColor.split(",");
                var toColors = toColor.split(",");
                
                for (var i = 0; i < 3; i++) 
                {
                    //opera...
                    if (isNaN(parseInt(thisColors[i])))
                    {
                        switch (i)
                        {
                            case 0:
                                thisColors[i] = HexToR(this.style.color);
                            break;
                            case 1:
                                thisColors[i] = HexToG(this.style.color);
                            break;
                            case 2:
                                thisColors[i] = HexToB(this.style.color);
                            break;
                        }
                    }
                    
                    var diff = parseInt(thisColors[i]) - parseInt(toColors[i]);
                    
                    if (diff != 0) 
                    {
                        exit = false;
                    }
                    
                    var shift = (Math.abs(diff) < COLORCONSTANT) ? Math.abs(diff) : COLORCONSTANT;
                    
                    if (diff < 0) 
                    {
                        thisColors[i] = parseInt(thisColors[i]) + shift;
                    }
                    else if (diff > 0) 
                    {
                        thisColors[i] = parseInt(thisColors[i]) - shift;
                    }
                }
                
                if (exit) 
                {
                    return;
                }
                
                this.style.color = "rgb(" + thisColors.join(",") + ")";
                
                setTimeout(createDelegate(this, fadeTo, [toColor]), TIMECONSTANT);
            }
        </script>
    </head>
    <body onload="init()">
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <br/>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <br/>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <br/>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <br/>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <br/>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <br/>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
        <a href="#">hello world!</a>
    </body>
</html>

pOw3r

hmm tak ja javascript neovladam ... takze preto som to hladal ... a velmi pekne dakujem za tvoj cas ..