div img in graustufen

[peter]

hallo zusammen,
mir fehlt mal gerade wieder ein wneig der ansatz und hab auch noch nichts passendes gefunden.
und zwar habe ich ein div element, indem eine liste mit farbigen bildern ist.
jetzt möchte ich gerne, dass diese bilder zuerst in graustufen angezeigt werden und dann beim mouseover in farbe gezeigt werden.
derzeit hab ich es mit der transparenz gelöst, find es aber nicht so gut:

  
$(function(){  
            $("div.out-footer").mouseover(function(){  
                $(this).animate({opacity : 1.0},1000);  
				if(hTimer != null){  
      			window.clearTimeout(hTimer);  
     			 hTimer = null;  
    			}  
            }).mouseout(function(){  
					hTimer = window.setTimeout(function(){$("div.out").animate({opacity : 0.5},1000);}, 300000);  
  
            });  
  
        });  

gibst es üebrhaupt die möglichkeit das umzumodeln?
viele grüße
peter

[suit]

gibst es üebrhaupt die möglichkeit das umzumodeln?

Zwei Bilder, das Graustufenbild dahinter und das Farbige darüber, das farbige hat 0 opacity und wird dann auf 100 geschraubt.

[peter]

Zwei Bilder, das Graustufenbild dahinter und das Farbige darüber, das farbige hat 0 opacity und wird dann auf 100 geschraubt.

ja, das würde auch gehen,
nur gibt es nicht nur ein bild, sondern mehrer die afueinmal die farbe bekommen sollen.
hatte uach schon überlegt, ob ich einfach ein großes rgraustufen bild drüber lege, doch dann sind die auf smartphones nicht mehr anklickbar. also die bilder sind links...

[Deus Figendi]

Zwei Bilder, das Graustufenbild dahinter und das Farbige darüber, das farbige hat 0 opacity und wird dann auf 100 geschraubt.

ja, das würde auch gehen,
nur gibt es nicht nur ein bild, sondern mehrer die afueinmal die farbe bekommen sollen.
hatte uach schon überlegt, ob ich einfach ein großes rgraustufen bild drüber lege, doch dann sind die auf smartphones nicht mehr anklickbar. also die bilder sind links...

Naja, aber das ist ja noch kein Hindernis ^^
In dem oben genannten Beispiel müsstest du nur das farbige als Link ausführen, weil es immer oben liegt (nur manchmal voll-transparent ist). Oder in deinem Beispiel, wenn das Graustufenbild oben liegt musst du beide oder nur das Graustufenbild als Link ausführen.
Aber letztlich müsste das hier doch schon tun (ungetestet):

<a href="./foo.html" style="position:relative;">  
 <img src="farbig.jpg" alt="foo" style="position:absolute;" />  
 <img src="grau.gif" alt="foo" class="hover_mich_weg" style="position:absolute;" />  
</a>

(sorry fürs Fullquote, aber irgendwie bezieh ich mich auf alles ^^)

[Gunnar Bittersmann]

@@suit:

nuqneH

Zwei Bilder, das Graustufenbild dahinter und das Farbige darüber, das farbige hat 0 opacity und wird dann auf 100 geschraubt.

Oder ressourcensparender: Beide Bilder neben- oder übereinander in einer Datei als Hintergrundbild. Bei :hover wird 'background-position' entsprechend gesetzt. (Oder Vordergrundbild und 'clip'.)

Qapla'

[ChrisB]

Hi,

Zwei Bilder, das Graustufenbild dahinter und das Farbige darüber, das farbige hat 0 opacity und wird dann auf 100 geschraubt.

Oder ressourcensparender: Beide Bilder neben- oder übereinander in einer Datei als Hintergrundbild.

Oder ressourcensparender: Canvas nehmen, und den Client das Bild in Graustufen umwandeln lassen ;-)

MfG ChrisB

[suit]

Zwei Bilder, das Graustufenbild dahinter und das Farbige darüber, das farbige hat 0 opacity und wird dann auf 100 geschraubt.

Oder ressourcensparender: Beide Bilder neben- oder übereinander in einer Datei als Hintergrundbild.

Oder ressourcensparender: Canvas nehmen, und den Client das Bild in Graustufen umwandeln lassen ;-)

Und für den alten Internet Exploder gibts filter:gray()