[CSS] Hover veranderende tekstkleur

Pagina: 1
Acties:

  • Furinax
  • Registratie: Augustus 2003
  • Laatst online: 21-05 14:43

Furinax

It'll only hurt until you die

Topicstarter
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
  • Registratie: November 2003
  • Niet online
code:
1
2
3
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
  • Registratie: Augustus 2003
  • Laatst online: 21-05 14:43

Furinax

It'll only hurt until you die

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

  • sjolmers
  • Registratie: September 2000
  • Laatst online: 04-02 09:18

sjolmers

het leven is té kort, geniet!

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

adr opleidingen en meer adr opleidingen


  • Furinax
  • Registratie: Augustus 2003
  • Laatst online: 21-05 14:43

Furinax

It'll only hurt until you die

Topicstarter
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
  • Registratie: Februari 2001
  • Laatst online: 16-05 14:36

Dark Blue

Compositionista!

Alpenmeisje

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 :P)

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

heidiulrich.nl | adventura.nl : rugzakavonturen | pathwise.nl : prepping geeks to get jobs


  • Annie
  • Registratie: Juni 1999
  • Laatst online: 25-11-2021

Annie

amateur megalomaan

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

Today's subliminal thought is:


  • Furinax
  • Registratie: Augustus 2003
  • Laatst online: 21-05 14:43

Furinax

It'll only hurt until you die

Topicstarter
code:
1
outdated source

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


  • Furinax
  • Registratie: Augustus 2003
  • Laatst online: 21-05 14:43

Furinax

It'll only hurt until you die

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

Voor diegene die tzelfde zoeken:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
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
  • Registratie: December 2002
  • Laatst online: 06-04-2023
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....

Koop een taart en ga het vieren!


  • Furinax
  • Registratie: Augustus 2003
  • Laatst online: 21-05 14:43

Furinax

It'll only hurt until you die

Topicstarter
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
  • Registratie: April 2001
  • Laatst online: 12-05 15:11

disjfa

be

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

disjfa - disj·fa (meneer)
disjfa.nl


Verwijderd

Firefox geeft die eerste link anders prima weer hoor. ;) Opera is gewoon een prutbrowser >:)

  • garage
  • Registratie: December 2002
  • Laatst online: 06-04-2023
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 ...

Koop een taart en ga het vieren!


  • disjfa
  • Registratie: April 2001
  • Laatst online: 12-05 15:11

disjfa

be

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 :{ :)

disjfa - disj·fa (meneer)
disjfa.nl


  • Furinax
  • Registratie: Augustus 2003
  • Laatst online: 21-05 14:43

Furinax

It'll only hurt until you die

Topicstarter
tnx voor de tip :)

  • drm
  • Registratie: Februari 2001
  • Laatst online: 09-06-2025

drm

f0pc0dert

Wat een enorme bloated code voor zoiets simpels zeg :X

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz


  • Furinax
  • Registratie: Augustus 2003
  • Laatst online: 21-05 14:43

Furinax

It'll only hurt until you die

Topicstarter
daar heb ik de code indd vandaan Anne
Pagina: 1