bingo: Cross fading bilder im IE7/8

Ich habe ein nettes und einfaches css-teil gefunden mit dem ich einen
schoenen Rollover-Efekt auf meiner Webseite erzeugen kann.
<www.prepago.net.ve/visa-virtual>

der code sieht so aus:

css:

#cf {  
	position:relative;  
	height:281px;  
	width:450px;  
	margin:0 auto;  
}  
#cf img {  
	position:absolute;  
	left:0;  
	-webkit-transition: opacity 1s ease-in-out;  
	-moz-transition: opacity 1s ease-in-out;  
	-o-transition: opacity 1s ease-in-out;  
	transition: opacity 1s ease-in-out;  
}  
  
#cf img.top:hover {  
	opacity:0;  
}

html:

<div id="cf">  
	<img class="bottom" src="/tests/images/Stones.jpg" />  
	<img class="top" src="/tests/images/Summit.jpg" /></div>

das funktioniert im chrome,opera,firefox und safari nur im ie7/8 gehts
nicht,die anderen versionen habe ich noch nicht getestet aber ich nehme
an in version 9 und 10 gehts ebenso nicht.
Gibt es im IE7 aufwaerts keinen Trick mehr mit hover.htc so wie noch
bis IE6 moeglich oder bin ich nur noch nicht fuendig geworden ?

  1. @@bingo:

    nuqneH

    das funktioniert im chrome,opera,firefox und safari nur im ie7/8 gehts
    nicht,die anderen versionen habe ich noch nicht getestet aber ich nehme an in version 9 und 10 gehts ebenso nicht.

    Deine Annahme ist falsch. IE 9 untertützt 'opacity', der Bilderwechsel sollte funktionieren, wenn auch ohne Überblendung.

    IE 7 und 8 verstehen Microsofts proprietären http://de.selfhtml.org/css/eigenschaften/filter.htm#alpha@title=Alpha-Filter.

    Deine Annahme ist gänzlich falsch für IE 10; der unterstützt 'transition' – präfixfrei.

    Gibt es im IE7 aufwaerts keinen Trick mehr mit hover.htc so wie noch
    bis IE6 moeglich oder bin ich nur noch nicht fuendig geworden ?

    Der Trick heißt progressive enhancement: Die Grundfunktionalität (der Bildwechsel) funktioniert in allen (grafischen) Browsern; für Browser, die dies unterstützen, kommt der Überblendeffekt hinzu.

    Wenn du dir wirklich die Mühe machen willst, den Effekt auch für veraltete Browser zu implementieren, heißt der Trick graceful degredation. Mit JavaScript, das per conditional compilation nur in IE ≤ 9 ausgeführt wird, wird die Transparenz in kleinen Schritten geändert.

    Qapla'

    --
    Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)