Hallo meine Lieben,
habe mal wieder ein Problem an dem ich mir bereits eine gefühlte Ewigkeit die Zähne ausbeiße.
Ich verwende auf unserer neuen Seite Grafiken mit transparentem Alpha-Kanal, sodass ich diese Hintergrundunabhängig verwenden kann.
Wenn ich mit der Maus darüber fahre, soll das Element auf 70% Deckkraft reduziert werden. Beim verlassen wieder zurück auf 100%.
Leider feuern einige Browser - allen vorran mal wieder der IE - beim überfahren der transparenten Stellen der Grafik ein onMouseOut-Event, was zu sehr unschönen Blitzern in der Animation kommt. In der Grafik im Anhang sieht man sehr gut, wie die einzelnen Kontainer angeordnet sind.
Ich habe bereits mit Timeouts gebastelt, leider hat das letztentlich nicht das gewünschte Ergebnis begracht.
Hier mal ein wenig Codebeispiele
Sowie die JavaScript-Funktionen
Ich hoffe Ihr könnt mir Helfen... drehe bald durch wenn das nicht richtig funktioniert.
habe mal wieder ein Problem an dem ich mir bereits eine gefühlte Ewigkeit die Zähne ausbeiße.
Ich verwende auf unserer neuen Seite Grafiken mit transparentem Alpha-Kanal, sodass ich diese Hintergrundunabhängig verwenden kann.
Wenn ich mit der Maus darüber fahre, soll das Element auf 70% Deckkraft reduziert werden. Beim verlassen wieder zurück auf 100%.
Leider feuern einige Browser - allen vorran mal wieder der IE - beim überfahren der transparenten Stellen der Grafik ein onMouseOut-Event, was zu sehr unschönen Blitzern in der Animation kommt. In der Grafik im Anhang sieht man sehr gut, wie die einzelnen Kontainer angeordnet sind.
Ich habe bereits mit Timeouts gebastelt, leider hat das letztentlich nicht das gewünschte Ergebnis begracht.
Hier mal ein wenig Codebeispiele
Code:
<div onMouseOver="GalerieListFadeOut(this)" onMouseOut="GalerieListFadeIn(event, this)" onClick="location.href='?p=galerie&category=1'">
<div class="galerie-list">
<img src="images/titleimg_hochzeit.png" alt="">
<img src="images/title_hochzeit.png" alt="">
</div>
</div>
Code:
function GalerieListFadeOut(obj)
{
Effect.toggle(obj, 'appear', { duration: 0.4, to: 0.6 });
}
function GalerieListFadeIn(e, obj)
{
Effect.toggle(obj, 'appear', { duration: 0.4, to: 1.0 });
}
Ich hoffe Ihr könnt mir Helfen... drehe bald durch wenn das nicht richtig funktioniert.