JavaScript: opacity works in opera but not IE

Question

I have used the following script for images and it appears to work fine; yet in Internet Explorer, the text is not fading out as it should. Any ideas?

 <td colspan="5" ID='links'>
<ul id="navlist">
    <li id="active"><a href="#" id="a" onmouseover="over(this)" onmouseout="out()">Apie įmonę</a>|</li>
    <li><a href="#" ID="b" onmouseover="over(this)" onmouseout="out()">Naujienos</a>|</li>
    <li><a href="#" ID="c" onmouseover="over(this)" onmouseout="out()">Kainynai</a>|</li>
    <li><a href="#" ID="d" onmouseover="over(this)" onmouseout="out()">Aktyvaus laisvalaikio priemonės</a>|</li>
    <li><a href="#" ID="e" onmouseover="over(this)" onmouseout="out()">Servisas</a>|</li>
    <li><a href="#" ID="f" onmouseover="over(this)" onmouseout="out()">Akcijos</a>|</li>
    <li><a href="#" ID="g" onmouseover="over(this)" onmouseout="out()">Karjera</a>|</li>
    <li><a href="#" ID="h" onmouseover="over(this)" onmouseout="out()">Galerija</a>|</li>
    <li><a href="#" ID="i" onmouseover="over(this)" onmouseout="out()">Naudota technika</a></li>
</ul>
</td>
<script>
var ba = new Array("a","b","c","d","e","f","g","h","i");


function over(from){
var value = 5; 

for(i=0;i<ba.length;i++){

    if(from.id==ba[i])
    {
        //do nothing
    }
    else{
        document.getElementById(ba[i]).style.MozOpacity = value/10;
        document.getElementById(ba[i]).style.opacity = value/10;
        document.getElementById(ba[i]).style.filter = 'alpha(opacity=' + value*10 + ')';

    }
}
}
function out(){
var value = 10;

for(i=0;i<ba.length;i++){

document.getElementById(ba[i]).style.MozOpacity = value/10;
document.getElementById(ba[i]).style.opacity = value/10;
document.getElementById(ba[i]).style.filter = 'alpha(opacity=' + value*10 + ')';
}

}
</script>

Thanks!

Answer 1

I would recommend creating a class definition to set the opacity for elements. Then, in your javascript, you would only need to write:

document.getElementById(ba[i]).className = "opacityClassName".

In your CSS, your opacityClassName style definition can look something like this:

.opacityClassName {
    filter: alpha(opacity:0.5);
    KHTMLOpacity: 0.5;
    MozOpacity: 0.5;
    -khtml-opacity:.50;
    -ms-filter:"alpha(opacity=50)";
    -moz-opacity:.50;
    filter:alpha(opacity=50);
    opacity:.50;
}

In this way, you don't have to worry about syntax like:

document.getElementById(ba[i]).style.ms-filter

not working.

Answer 2

Check this out: http://www.quirksmode.org/css/opacity.html

The important part: "IE8 uses a new notation: -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";"

Also, Internet Explorer (6 and 8) seems to think that the element must have width explicitly set, before it can be transparent. Weird. The above link does set the width with CSS, but doesn't mention this strange requirement.

(although you didn't specifically ask about it, I'd recommend using jQuery for this type of tasks - it makes such effects much easier to work with, see e.g. here: http://api.jquery.com/fadeTo/ )

Answer 3

Use jQuery. I'm aware that this is the cliché answer, but in this case, it's spot on: it handles the browser quirks for you, automagically.

Observe example:

<table>
<tr>
<td colspan="5" ID='links'>
<ul id="navlist">
    <li id="active"><a href="#" id="a">Apie įmonę</a>|</li>
    <li><a href="#" ID="b">Naujienos</a>|</li>
    <li><a href="#" ID="c">Kainynai</a>|</li>
    <li><a href="#" ID="d">Aktyvaus laisvalaikio priemonės</a>|</li>
    <li><a href="#" ID="e">Servisas</a>|</li>
    <li><a href="#" ID="f">Akcijos</a>|</li>
    <li><a href="#" ID="g">Karjera</a>|</li>
    <li><a href="#" ID="h">Galerija</a>|</li>
    <li><a href="#" ID="i">Naudota technika</a></li>
</ul>
</td>
</tr>
</table>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script><!-- load jQuery -->
<script>
// run when the document is loaded
$(document).ready(function(){

    // give each link under #navlist opacity, unless cursor is over it
    $('#navlist a').mouseover(function(){
        var current = this;
            // run the following for each matching element
        $('#navlist a').each(function(index,element){
            if (element != current) {
                // handles browser quirks for us
                    $(element).css('opacity',0.5);
            }
        });
    });

    // remove the opacity
    $('#navlist a').mouseout(function(event){
        $('#navlist a').each(function(index,element){
            $(element).css('opacity',1);
        });
    });
});

</script>

Works cross-browser (Opera, Chromium, Midori, Firefox, IE6 and IE8), with less code, gets the job done. Time spent: 15 minutes.