IE: Witte spikkels bij gebruik opacity

[Verwijderd]

Bij het 'infaden' van afbeeldingen (mbv opacity) ontstaan er op sommige plaatjes witte spikkels.
Gebeurt alleen in IE, geen probleem met Mozilla/FireFox.
Zonder faden geen spikkels in IE.
Zie www.klikenplak.com/vrij.htm foto 2 (ook bij 3, 8 en 9)
Enig idee?

[Willem]

Wat heb je zelf al geprobeerd te achterhalen dan?

[Verwijderd]

Minder/geen compressie van jpg, ander formaat (PNG).
Geprobeerd de image te refreshen na het infaden (zodat de afbeelding over de gespikkelde versie wordt geladen).
Heel veel googlen (dots, specks, speckles, pixels).
Geen succes. En toen wist ik het niet meer ...

[Dark Blue]

Ja, maar weet je nou waar je je probleem eigenlijk moet zoeken?

Zijn de foto's in je programma al gespikkeld -> je fotobewerkingsprogramma
Zijn de foto's alleen in IE gespikkeld -> het script
Zijn de foto's ook zonder dat script gespikkeld -> je browser
Zijn de foto's direct vanaf de server geladen ook gespikkeld-> hm, gek.

Ik heb het idee dat je dit fade effect bereikt met een filter, dat in IE met een IEspecfiek filter wordt opgelost; en dat hij daar niet helemaal vrolijk van wordt. Script gepost:

code:

function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
    //if an element is invisible, make it visible, else make it ivisible
    if(document.getElementById(id).style.opacity == 0) {
        opacity(id, 0, 100, millisec);
    } else {
        opacity(id, 100, 0, millisec);
    }
}

function blendimage(divid, imageid, imagefile, millisec) {
    var speed = Math.round(millisec / 100);
    var timer = 0;
    
    //set the current image as background
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
    
    //make image transparent
    changeOpac(0, imageid);
    
    //make new image
    document.getElementById(imageid).src = imagefile;

    //fade in image
    for(i = 0; i <= 100; i++) {
        setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
        timer++;
    }
}

function currentOpac(id, opacEnd, millisec) {
    //standard opacity is 100
    var currentOpac = 100;
    
    //if the element has an opacity set, get it
    if(document.getElementById(id).style.opacity < 100) {
        currentOpac = document.getElementById(id).style.opacity * 100;
    }

    //call for the function that changes the opacity
    opacity(id, currentOpac, opacEnd, millisec)
}

[ Voor 102% gewijzigd door Dark Blue op 21-10-2005 15:06 ]

[Verwijderd]

Nee, ik weet het niet...

Zijn de foto's in je programma al gespikkeld -> Nee
Zijn de foto's alleen in IE gespikkeld -> Ja, maar alleen bij gebruik script
Zijn de foto's ook zonder dat script gespikkeld -> Nee
Zijn de foto's direct vanaf de server geladen ook gespikkeld-> Nee

Het lijkt dus een combinatie van IE (want niet in Mozilla e.d.) en het script (want zonder script geen probleem) te zijn. Maar bij de overige 36 afbeeldingen op de site geen problemen.

[Cyphax]

Dark Blue schreef op vrijdag 21 oktober 2005 @ 15:01:
Ik heb het idee dat je dit fade effect bereikt met een filter, dat in IE met een IEspecfiek filter wordt opgelost; en dat hij daar niet helemaal vrolijk van wordt.

Dat gaat ook niet anders... 't zit niet in de foto iig. Ik heb ook weleens een fade script gemaakt voor IE en Mozilla, en dat werkt beide op een andere manier. Ik zie wel dat Blerkselmans dat iets anders oplost dan ik.

code:

Element.filters.alpha.opacity += step;

kun je zo ook setten ipv de manier waarop Blerkselmans dat oplost:

code:

object.filter = "alpha(opacity=" + opacity + ")";

Maar of dat uit zou moeten maken?

[ Voor 5% gewijzigd door Cyphax op 21-10-2005 15:08 ]

[Dark Blue]

Het zou volgens mij in die Khtml Opacity moeten zitten maar ik zie nog niemand die daarover een boekje opendoet als ik op Google zoek.

Het script zet wel twee foto's over elkaar. Misschien is dat een oorzaak. Hij zet dus de te laten verschijnen foto eerst als background en gooit daarna de oude foto naar een steeds lagere opacity.

[ Voor 44% gewijzigd door Dark Blue op 21-10-2005 15:30 ]

[Verwijderd]

Dat is waar, maar als ik als testje met een leeg scherm dezelfde 2 images naast elkaar zet: Geen probleem. Laat ik 1 van beide wegfaden door bv een mouseon event dan verschijnen de pikkels meteen op het moment dat de event afgaat, dus bij opacity(100).
Ik zou al van het probleem af zijn (nou ja, van het symptoom) als ik na het opkomen het gespikkelde plaatje zou kunnen overschrijven met het origineel. Dat lukt niet omdat (denk ik) het filter er nog op zit.
Kan ik die er af halen?

[Dark Blue]

Ik denk het wel, maar daarvoor is enige kennis van Javascript nodig. Tja, een 'scriptje' is geen broodje bal wat je kant en klaar met je favoriete saus uit de muur trekt hè.

[Cyphax]

Dark Blue schreef op vrijdag 21 oktober 2005 @ 15:28:
Het script zet wel twee foto's over elkaar. Misschien is dat een oorzaak. Hij zet dus de te laten verschijnen foto eerst als background en gooit daarna de oude foto naar een steeds lagere opacity.

Dat zou geen probleem moeten zijn. Het script van mij doet hetzelfde maar vernaggelt de plaatjes absoluut niet:

code:

    function fadeOut(ElementID, speed, step)
    {
      var Element = document.getElementById(ElementID);
      if (!Element) return(false);
      if (!Element.style.MozOpacity) 
        Element.style.MozOpacity = 1;
      if (typeof Element.filters != 'undefined')
        Element.filters.alpha.opacity -= step;
      Element.style.MozOpacity = parseFloat(Element.style.MozOpacity) - step / 100;
      if (Element.style.MozOpacity > 0)
         setTimeout("fadeOut('" + ElementID + "', " + speed + ", " + step + ")", speed);
    }

    function fadeIn(ElementID, speed, step)
    {
      var Element = document.getElementById(ElementID);
      if (!Element) return(false);
      if (!Element.style.MozOpacity)
        Element.style.MozOpacity = 0;
      if (typeof Element.filters != 'undefined')
        Element.filters.alpha.opacity += step;
      
      Element.style.MozOpacity = parseFloat(Element.style.MozOpacity) + step / 100;
      
      if (Element.style.MozOpacity < 1)
         setTimeout("fadeIn('" + ElementID + "', " + speed + ", " + step + ")", speed);
    }

[Verwijderd]

Dark Blue, je vergelijking met een broodje bal klopt helemaal. Ik heb weinig Javascript kennis, maar wil best leren. Wielen uitvinden vind ik echter zonde van mijn tijd, ga nu mijn eigen saus maken m.b.v. de Cyphax-variant. Bedankt!

[Verwijderd]

Het probleem heeft niets met JS te maken.
Het zit um in het filter. Ook zonder JS (een "waarom heb je dat niet eerder getest?" is op zijn plaats) geven de afbeeldingen witte spikkels. Dit gebeurt dus al bij de "style=filter:alpha(opacity=100)"
Deze filters waren toch MS uitvindingen? Waarom werkt hij dan wel prima in FF maar niet in IE???
Enfin, nog geen enkele referentie naar een overeenkomend probleem gevonden. Zou ik dan de enige zijn?

[sandergar]

Verwijderd schreef op zaterdag 22 oktober 2005 @ 20:04:
Het probleem heeft niets met JS te maken.
Het zit um in het filter. Ook zonder JS (een "waarom heb je dat niet eerder getest?" is op zijn plaats) geven de afbeeldingen witte spikkels. Dit gebeurt dus al bij de "style=filter:alpha(opacity=100)"
Deze filters waren toch MS uitvindingen? Waarom werkt hij dan wel prima in FF maar niet in IE???
Enfin, nog geen enkele referentie naar een overeenkomend probleem gevonden. Zou ik dan de enige zijn?

Nope, je bent niet de enige

Het gebeurt niet random toch? Het zijn steeds dezelfde foto's met steeds dezelfde pixels toch? Wellicht de foto's eens bestuderen met een alpha filter in Photoshop?

[job]

Misschien een ontzettend niets toevoegende reply. Maar ik post hem toch maar.
Naar mijn idee zijn die witte spikkels niet wit, maar het grijs van de achtergrond v/d website.

[ Voor 4% gewijzigd door job op 22-10-2005 21:35 ]

[Verwijderd]

sandergar, bedankt voor je reuze interessante link. Voel me opeens een stuk minder eenzaam....
Job, je hebt gelijk (even getest met een rode background). De filter laat een aantal pixels transparant.
Je zou het niet zeggen, maar sandergar heeft een punt. Dezelfde fotoos, dezelfde pixels, back to Photoshop.
Maar, zoals ik laatst op dit forum zag, ik was opeens niet zo blij met IE, zal ik maar zeggen...

[Sharky]

...en ze vershijnen alleen op de donkerste gedeeltes van de afbeelding

[Verwijderd]

Het probleem (nou ja, het symptoom) opgelost door de betreffende fotoos een tandje lichter te maken. Mijn conclusie is dat MS problemen heeft met de implementatie van het alphafilter opacity als het gaat om images met hele donkere pixels.

[Dark Blue]

Hmm, kortweg: Da's kut.
Want je fotografe (of ben je het zelf?) wil natuurlijk wel een zo goed mogelijke afspiegeling van haar fotografische kunsten op de website.
Ik denk dat je de oplossing in dit geval niet in de foto's moet gaan zoeken maar in het gebruik van een ander script dat hetzelfde doet.

[Verwijderd]

Daswaar. Aan de andere kant, het grootste kwaliteitsverlies wordt natuurlijk al geleden bij het comprimeren van de foto naar iets wat niet groter dan 60 KB mag zijn.
Maar om dan om zoiets lulligs nog concessies (?) te doen is wel een beetje zuur ja.
Bedankt voor het meedenken i.i.g.

(de fotografe is mijn vriendin).