[HTML] Image van grijs naar originele image kleur bij hover - Softwareontwikkeling

donderdag 8 april 2004 16:44

Acties:

Topicstarter

Hey, ik heb een kleine oranje banner, en die wil ik op een grijze site plaatsten.
Hoe krijg ik voor elkaar, dat deze met grijstinten weergegeven wordt, en als je er overheen gaat met je muis met een overloop effectje zn originele kleuren laat zien?

Heb t vaker gezien op diverse websites een tijd geleden, maar kan niet meer op komen waar. Search werkte ook niet echt

Kan dit met CSS? Of moet je hier speciaal scriptje voor hebben.

IIG bedankt

donderdag 8 april 2004 16:47

Acties:

ramonp

Je hebt van die standaard java scriptjes die als je met je muis over een plaatje gaat een ander plaatjes laat zien.

Je zou even op OnMouseOver / OnMouseOut moeten zoeken.

[ Voor 22% gewijzigd door ramonp op 08-04-2004 16:51 . Reden: typo's + toevoeging ]

donderdag 8 april 2004 16:48

Acties:

TwoR

Gekleurde stippen

Deze code fade je plaatje weg en bij de mouse over zie je het weer in fullcolor volgens mij bedoel je dat .

offtopic:
Sorry voor de fucked up layout

code:

<SCRIPT language=JavaScript>
        nereidFadeObjects = new Object();
        nereidFadeTimers = new Object();

        function nereidFade(object, destOp, rate, delta){
        if (!document.all)
        return
            if (object != "[object]"){  
                setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
                return;
            }
                
            clearTimeout(nereidFadeTimers[object.sourceIndex]);
            
            diff = destOp-object.filters.alpha.opacity;
            direction = 1;
            if (object.filters.alpha.opacity > destOp){
                direction = -1;
            }
            delta=Math.min(direction*diff,delta);
            object.filters.alpha.opacity+=direction*delta;

            if (object.filters.alpha.opacity != destOp){
                nereidFadeObjects[object.sourceIndex]=object;
                nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
            }
        }
        </SCRIPT>

        <a href#" target="_top">
    <img src="./images/intro_pand.gif" border="0" style="filter:alpha(opacity=30)" onMouseOver="nereidFade(this,150,30,10)" 
    onMouseOut="nereidFade(this,25,8,4)"></a>

[ Voor 19% gewijzigd door TwoR op 08-04-2004 16:49 ]

donderdag 8 april 2004 16:51

Acties:

TheBorg

Resistance is futile.

Dit lijkt me genoeg met CSS:

a:hover IMG {
filter: alpha(Opacity=100) gray
}

donderdag 8 april 2004 17:02

Acties:

Thunk

Topicstarter

Mja TwoR, bedankt, zo'n soort script had ik ook al gevonden.
Alleen nog net iets anders, bij mouse out ging die in 1x naar zn fade kleur, zonder fade out dus.

Maar wat ik eigenlijk echt zoek is dat het plaatje bij de page load in grijswaarden is (zoals de site), en dan bij mouse over naar zn kleur gaat, en bij mouse out weer naar grijswaarden springt.

Kan zo'n javascriptje alleen nergens vinden ..

donderdag 8 april 2004 17:29

Acties:

TheBorg

Resistance is futile.

Hiero, getest en wel:

<style type="text/css">
:hover .blabla {
filter: alpha(Opacity=100)
}
.blabla {
filter: alpha(Opacity=100) gray
}
</style>
</head>

<body>
<a href="http://www">[img]"jeplaatje.jpg"[/img]</a>
</body>
</html>

[ Voor 30% gewijzigd door TheBorg op 08-04-2004 17:30 ]

donderdag 8 april 2004 17:40

Acties:

Thunk

Topicstarter

Hey Borg, zo'n soortgelijk CSS script had ik zelf ook al in elkaar geflanst.
Maar het is helaas alleen met javascript mogelijk om een geleidelijke overgang te laten zien. Hier ben ik dus nu dan ook naar op zoek (alleen voor grijs > kleur, andersom mag 'instantly')..

Heb google afgestruid met diverse search termen, experts-exchange ook al, diverse javascript sites bezocht maar het is niet makkelijk om te vinden wat ik precies zoek.

IIG bedankt voor je hulp!

donderdag 8 april 2004 17:53

Acties:

TheBorg

Resistance is futile.

Check deze pagina even: http://www.jegsworks.com/...HTML/transition-blend.htm

En deze

http://simplythebest.net/scripts/dhtml_script_110.html

[ Voor 30% gewijzigd door TheBorg op 08-04-2004 18:07 ]