hover animated gif + ie problemen

[torp]

Ik ben een site aan het opknappen die ooit door iemand met GoLive is gemaakt. Er staan op de index-pagina een flink aantal thumbnails die bij roll-over een animated gif laten zien. Eigenlijk denk ik dat het effect (een soort langzame knipper) ook wel met opacity geregeld kan worden. Maar voorlopig heb ik alleen die hele berg GoLive Javascripts eruitgegooid en vervangen door een simpele :hover, waarbij een jpg vervangen wordt door een animated gif. Resultaat: het bestandje is meer dan de helft kleiner en het werkt prima in Firefox en Safari.

Alleen in IE 6/7 krijg je na een tijdje rondklikken problemen: het lijkt of de redraw niet meer lukt, op een gegeven moment blijf je zelfs met een blanco pagina zitten. Ik denk dat IE bijna crasht. Valt hier nog wat tegen te doen? Toen de roll-overs nog met JS aangestuurd worden, speelde dit probleem blijkbaar niet. Hier is de site.

Screenshot 1: normale situatie (de witte vakjes hebben geen link).


Screenshot 2: na een tijdje rondmuizen, af en toe klikken en weer verder muizen.


Screenshot 3: (vlak na vorige situatie).

[ Voor 28% gewijzigd door torp op 21-03-2008 11:50 ]

[frickY]

Geen enkel probleem in IE 6 (SP2) hoor

[torp]

Dank je, misschien was het dan alleen in IE 7... Daarin heb ik het probleem zonet nog geverifieerd. Iemand een idee hoe dit op te lossen?

[ Voor 18% gewijzigd door torp op 20-03-2008 22:36 ]

[Wiethoofd]

Firefox 3 beta 4 ook geen problemen
wel geeft de infoknop geen mouseover effect wat de rest wel doet, of hoort dit?

{update}
IE7 op XP pro SP2 ook geen problemen, wel komt hij aanzetten met een popup die hij niet wil laten zien

{update2}
Firefox 2.0.0.12 ook geen problemen, alleen bij '3D Rastertekening' werkte de teruglink niet
doe ik die in FF 3b4 dan komt hij daar wel met een popup waar hij dit eerst niet deed

{update3}
IE6 win xp2 doet hier op een andere computer ook zo raar als bij jou, alleen staan de lijnen nog recht.
Ook zijn de mousoverflasheffecten in IE6 veel intenser qua beweging en faden dan in FF2.0.0.12 waar de site wel werkt

[ Voor 83% gewijzigd door Wiethoofd op 22-03-2008 09:00 ]

[torp]

Bedankt Wiethoofd. Het probleem werd door de opdrachtgever geconstateerd in IE7 en ik heb het dus ook gemerkt. Typisch dat het bij jou geen probleem is.

De infoknop heeft inderdaad geen roll-over. Die vreselijke pop-ups komen door de nedstat-teller (de opdrachtgever wist dat zelf niet eens want die heeft een popup-killer aanstaan ). De teruglink is overal hetzelfde.

[ Voor 93% gewijzigd door torp op 21-03-2008 10:17 ]

[torp]

Nog weer eens geprobeerd en de screenshots in openingspost toegevoegd. Het duurt wel even voor het verschijnsel optreedt. Dit trouwens in IE7 binnen VMWare Fusion op een Mac, ik denk niet dat ik anders de screenshots nog had kunnen maken...

[ Voor 35% gewijzigd door torp op 21-03-2008 11:48 ]

[Q00101100]

Ik kan het probleem bevestigen op Windows Vista (geen service pack) met IE7. Na iets van 3 minuten rondklikken verdwijnen alle thumbs als ik er overheen ga.

Ik krijg trouwens een ad pop-up van KLM, of is dat ook van nedstat?

Edit: Als ik vervolgens IE minimaliseer of naar een ander tabblad ga en dan weer terug ga naar die site, staan alle thumbs er weer. Om vervolgens weer te verdwijnen bij hover.

[ Voor 28% gewijzigd door Q00101100 op 21-03-2008 11:56 ]

[torp]

Q00101100 schreef op vrijdag 21 maart 2008 @ 11:52:
Ik krijg trouwens een ad pop-up van KLM, of is dat ook van nedstat?

Klopt, is van NedstatBasic, nu blijkbaar overgenomen door Motigo. Bedankt voor je bevestiging, maar nu nog een oplossing... Ik heb net al een alternatief geprobeerd: de animated gif in de background van de <td>, en in de background van de <a> een jpg die bij :hover verdwijnt, maar dit levert hetzelfde op (ook geen fraaie oplossing: ± 30 onzichtbare animated gifs...). Zou dit nu een memory leak zijn?

[ Voor 12% gewijzigd door torp op 21-03-2008 14:24 ]

[Duroth]

In het verleden zelf een vergelijkbaar probleem gehad bij IE6; animated .gif's stopten na bepaalde tijd gewoon met herhalen. Geen leven meer in te krijgen.

Werkt de site wel als je statische afbeeldingen gebruikt?

Wekt een full refresh (Control + F5), waarmee je ook de afbeeldingen geforceerd herlaad, de boel weer tot leven?

[torp]

Duroth schreef op zaterdag 22 maart 2008 @ 00:20:
Werkt de site wel als je statische afbeeldingen gebruikt?

Je bedoelt bij :hover? Tja, als dat niet eens zou werken... Ik zal het eens testen.

Nu :hover in IE niet goed blijkt te werken zie ik 2 mogelijkheden:
1) Javascript: terug naar de oude situatie, bij onMouseOver de afbeelding vervangen door een animated gif. Blijkbaar levert dit minder problemen op voor IE.
2) Javascript: bij onMouseOver een zwart vlakje boven de afbeelding in- en uit laten 'faden' om het zelfde effect te bereiken. Voordeel: ik hoef geen animated gifs meer te maken

[djexplo]

Bekend probleem, als IE7 iets serverside moet ophalen of druk is met javascript werken de animated gifs niet goed meer. Oplossing is het cachen van de animated gifs voor gebruik, ajax voor ophalen server informatie en javascript onmouse events blokeren als er al een animated gif aan het spelen is.

[torp]

In dit geval is er geen javascript, alleen css. Desondanks hetzelfde probleem? Ik denk dat ik maar ga voor de definitieve oplossing 2 (hier vlak boven).

[ Voor 5% gewijzigd door torp op 22-03-2008 10:55 ]

[Blorgg]

Je zou anders ook nog eens kunnen spelen met whatever:hover. Dan kan je in IE ook andere dingen dan alleen links een :hover effect geven. Misschien dat het dan beter gaat.

Most modern browsers support the :hover selector for any html element. This is cool, because it enables you to, for instance, apply a mouseover effect to table rows <tr> using only CSS. IE however, with a market share of > 90%, does not natively support :hover on elements other than links <a>, rendering the entire :hover concept useless. Or does it?

[torp]

Op zich werkt hover wel, er is meer een probleem door de animated gif.

[Blorgg]

Het is duidelijk dat de :hover werkt voor de links

Je gebruikt op dit moment een gif als achtergrond voor de A-elementen. Wat ik aan wil geven is dat IE er misschien minder problemen mee heeft als je deze gif zou gebruiken als achtergrond voor je TD-elementen. Wat ik dan ook zou proberen is om even alle ID's voor je A-elementen achterwege te laten. Deze heb je dan in principe niet meer nodig waardoor het geheel iets minder complex wordt qua HTML code.

Of het werkt, geen idee. Het is ook maar een suggestie.

[torp]

Je denkt dat de id's voor de A-elementen het zwaarder maken voor de engine? Nooit over nagedacht, maar dan is het misschien handiger om de id's voor de TD's weg te laten, die hebben geen enkele functie behalve dat het voor mij lekker overzichtelijk is.
Waarom het als achtergrond van een TD minder problemen zou geven dan bij een A, zie ik niet zo maar misschien werkt het, wie weet. Wat ik wel geprobeerd heb, is de animated gif in de TD-background en een jpg in de A die de onderliggende gif verbergt, behalve bij hover. Maar het probleem bleef.

[Verwijderd]

In dit geval zou ik er sowieso voor kiezen om de mouseover met JavaScript te regelen i.p.v. background-images in css. Want je zult de plaatjes ook nog een alt="" mee moeten geven. En voor de mensen die geen JavaScript aan hebben staan is het ook geen probleem, want het enige wat ze missen is het 'mooie' effectje.

[MueR]

Javascript moet je juist vermijden als het ook kan worden opgelost met CSS.

[Verwijderd]

MueR schreef op zaterdag 22 maart 2008 @ 17:02:
Javascript moet je juist vermijden als het ook kan worden opgelost met CSS.

Niet in alle gevallen. In dit geval dus juist niet, omdat het toch echt om informatieve afbeeldingen gaat en niet om decoratieve. En daarom is het dus beter om ze in de HTML (als img) plaatsen en niet als background in de CSS.

En dat de afbeelding verandert bij een mouseover is in dit geval alleen maar bijzaak, het is niet van noodzakelijk belang voor de bezoeker. En zoekmachine en bijvoorbeeld een blinde kan op deze manier niks met die achtergrondafbeeldingen, omdat de enige content die er nu op staat is 'Welkom op de site van Gerda Kruimer'. Dus gewoon img in de HTML gebruiken met een goede omschrijvende alt is beter in dit geval en dan de eventuele mouse-over regelen met JavaScript.

[ Voor 3% gewijzigd door Verwijderd op 22-03-2008 17:14 ]

[Bosmonster]

MueR schreef op zaterdag 22 maart 2008 @ 17:02:
Javascript moet je juist vermijden als het ook kan worden opgelost met CSS.

Das onzin. Zolang de javascript niet obtrusief wordt gebruikt en het dus ook prima werkt zonder, is er niks aan de hand. Bovenstaand is eenvoudig op te lossen met een simpel opacity scriptje (bijvoorbeeld mootools is het echt 3 regels) en hoef je geen losse afbeeldingen dus in te laden of wazige CSS-trucs te gebruiken.

[ Voor 3% gewijzigd door Bosmonster op 22-03-2008 21:29 ]