[CSS] Hover veranderende tekstkleur

[Furinax]

Hya,

Ik ben opzoek naar t stukje CSS waardoor je een soort fadeout over je tekstlinks heenkrijgt.
Bv, je gaat met je cursor op een link staan en deze veranderd in het rood. Daarna veranderd de kleur naar wit, tot je je muis eraf haalt of klikt. Ik heb flink gezocht op internet en een aantal pages gezien die t hebben. Helaas weet ik de urls van die sites niet meer en kan ergens een code op internet vinden.

Iemand die me hieraan kan helpen?
tnx.

[benoni]

code:

a:hover { color: #06c; text-decoration: underline }
a:link { color: #06c; text-decoration: none }
a:visited { color: #339; text-decoration: none }

Edit: onee, moet het geleidelijk aan faden dus?
Mmm... Javascript loopje?

[ Voor 20% gewijzigd door benoni op 01-05-2004 14:45 ]

[Furinax]

faden bij mouseover yes yes. Hmm ik ben geen javascriptheld.

[sjolmers]

Heb je een voorbeeldje van eens ite waar dat wordt gebruikt? Kijk eens in de source...

[Furinax]

nee die voorbeelden heb ik niet meer.

Kep btw wel iets gevonden, maar dan moet ik bij elke link class="fade" erbij gaan zetten. Er moet een makkelijkere manier zijn lijkt me.

[Dark Blue]

Dat je bij elke link er 'class=fade' bij moet gaan zetten klinkt me wat vreemd in de oren, je kunt een link toch gewoon aanspreken met a en a:hover zoals hierboven gedaan is, als jij dan een speciale manier van faden hebt, kun je die bij in de betreffende css code zetten.

Ik geloof dat op www.womenindesign.com nog wel eens gebruik wordt gemaakt van dit soort leuke css... / al dan niet in combinatie met javascript. kijk maar even.

Aaarghh womenindesign.com is down ... het moet een andere site zijn geweest, prachtig altijd... damn... (phew, het was unladylike.org maar die heeft ook alweer een nieuw ontwerp )

[ Voor 26% gewijzigd door Dark Blue op 01-05-2004 15:34 ]

[Annie]

waarschijnlijk bedoel je de filters (fade?) in IE. Meer info bij MS

[Furinax]

code:

outdated source

[ Voor 98% gewijzigd door Furinax op 01-05-2004 16:51 ]

[Furinax]

Oke dudes, tnx voor t helpen. Ik heb een script gevonden die links automatisch opzoekt en faded.

Voor diegene die tzelfde zoeken:

code:

var fadeTo = "#000000";
var fiBy = 6;
var foBy = 10;
var speed = 10;
var ignoreClass = "ignore";
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;

Even in een extern bestandje zetten (fader.js) en aan je site linken (<script language="JavaScript" src="../scripts-css/fader.js"></script>

Voorbeeld: http://home.kabelfoon.nl/~cipejoba/tuw/php/index.html & in de toekomst http://www.tuwclan.com

[ Voor 14% gewijzigd door Furinax op 01-05-2004 17:34 ]

[garage]

Furinax schreef op 01 mei 2004 @ 16:51:
Oke dudes, tnx voor t helpen. Ik heb een script gevonden die links automatisch opzoekt en faded.

[snip]

Voorbeeld: http://home.kabelfoon.nl/tuw/php

Daar krijg ik:

Not Found
The requested URL /tuw/php was not found on this server.

Apache/1.3.29 Server at home.kabelfoon.nl Port 80

& in de toekomst http://www.tuwclan.com

Daar zie ik het effect met Firefox niet....

[Furinax]

http://home.kabelfoon.nl/~cipejoba/tuw/php/index.html

Foutje, was een stukkie vergeten in mijn opwinding

bij www.tuwclan.com bestaat het effect ook nog niet. Ben bezig met een nieuwe site en op de kabelfoon site staat de beta zeg maar. Zodra ik er zelf tevreden mee bent wordt ie naar www.tuwclan.com geupload.

[ Voor 79% gewijzigd door Furinax op 01-05-2004 17:36 . Reden: typo ]

[disjfa]

Owja *kuch* dat werkt niet in opera en denk dan ook niet in mozilla

[Verwijderd]

Firefox geeft die eerste link anders prima weer hoor. Opera is gewoon een prutbrowser

[garage]

Ah, de nieuwe link werkt prima, zelfs onder Firefox komt er netjes een fade in. Of het een effect is wat ik handig vind ... dat denk ik niet.

Het trekt ook nogal wat CPU tijd als ik dat even goed zie, bij een enkele hover een procentje of 5 extra op een Athlon XP 1800, bij vele hovers schiet hij toch naar 50% en hoger ...

[disjfa]

Ow dat het in opera niet werkt komt gewoon omdat er geen type="text/javascript" bij staat. Verder kan die language="javascript" wel weg.

Moet dit nou elke keer gezegd worden

[Furinax]

tnx voor de tip

[drm]

Wat een enorme bloated code voor zoiets simpels zeg

[Verwijderd]

Zie ook: http://projects.impenetrable.org/linkfader/

[Furinax]

daar heb ik de code indd vandaan Anne