[PNG] Fade-script icm. transparancy in IE - Softwareontwikkeling

dinsdag 28 november 2006 09:13

Acties:

Verwijderd

Topicstarter

Momenteel heb ik drie afbeelding png die elkaar overlappen en doormiddel van alpha-channels delen transparant zijn. Om dit te laten werken in IE gebruik ik in de css:

behavior: url("csshover.htc");

waarbij csshover.htc het script is dat transparancy in IE laat werken:

code:

<public:component lightWeight="true">
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<public:attach event="onbeforeprint" onevent="beforePrint()" for="window"/>
<public:attach event="onafterprint" onevent="afterPrint()" for="window"/>
<script>

/*
 * PNG Behavior
 *
 * This script was created by Erik Arvidsson (http://webfx.eae.net/contact.html#erik)
 * for WebFX (http://webfx.eae.net)
 * Copyright 2002-2004
 *
 * For usage see license at http://webfx.eae.net/license.html
 *
 * Version: 1.02
 * Created: 2001-??-??  First working version
 * Updated: 2002-03-28  Fixed issue when starting with a non png image and
 *                      switching between non png images
 *          2003-01-06  Fixed RegExp to correctly work with IE 5.0x
 *          2004-05-09  When printing revert to original
 *
 */

var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
                navigator.platform == "Win32";

var realSrc;
var blankSrc = "/images/empty.gif";
var isPrinting = false;

if (supported) fixImage();

function propertyChanged() {
    if (!supported || isPrinting) return;

    var pName = event.propertyName;
    if (pName != "src") return;
    // if not set to blank
    if (!new RegExp(blankSrc).test(src))
        fixImage();
};

function fixImage() {
    // get src
    var src = element.src;

    // check for real change
    if (src == realSrc && /\.png$/i.test(src)) {
        element.src = blankSrc;
        return;
    }

    if ( ! new RegExp(blankSrc).test(src)) {
        // backup old src
        realSrc = src;
    }

    // test for png
    if (/\.png$/i.test(realSrc)) {
        // set blank image
        element.src = blankSrc;
        // set filter
        element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
                    "AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
    }
    else {
        // remove filter
        element.runtimeStyle.filter = "";
    }
}

function beforePrint() {
    isPrinting = true;
    element.src = realSrc;
    element.runtimeStyle.filter = "";
    realSrc = null;
}

function afterPrint() {
    isPrinting = false;
    fixImage();
}

</script>
</public:component>

Nu wil ik bij een mouseover de afbeeldingen langzaam laten weg faden (zodat de onderliggende afbeelding zichtbaar wordt).
Dit kan met verschillende javascripts, die ook werken in FireFox maar geen die ook werkt in Internet Explorer 6.

Is dit überhaupt mogelijk om dit ook in IE werkend te krijgen ?

dinsdag 28 november 2006 12:21

Acties:

_Thanatos_

Ja, en kaal

Ik denk dat je iets met opacity moet vogelen...

Cascading Stylesheet:

img {
   filter: alpha(opacity=50);
   -moz-opacity: 0.5;
   opacity: 0.5;
}

Voor respectievelijke MSIE, oudere gecko-based browsers, en moderne browsers inclusief Opera 9.

btw, in css hoeft (mag?) een url niet tussen quotes.

日本！🎌

dinsdag 28 november 2006 13:22

Acties:

user109731

_Thanatos_ schreef op dinsdag 28 november 2006 @ 12:21:

btw, in css hoeft (mag?) een url niet tussen quotes.

Hoeft niet, maar mag wel