JavaScript: прозрачность работает в опере, но не в IE

Question

Я использовал следующий скрипт для изображений, и он, кажется, работает нормально; однако в Internet Explorer текст не исчезает, как следует. Есть идеи?

 <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>

Спасибо! * * 1004

Answer 1

Я бы рекомендовал создать определение класса, чтобы установить непрозрачность для элементов.Затем в вашем javascript вам нужно будет только написать:

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

В вашем CSS определение стиля opacityClassName может выглядеть примерно так:

.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;
}

Таким образом, выне нужно беспокоиться о синтаксисе вроде:

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

не работает.

Answer 2

Проверьте это: http://www.quirksmode.org/css/opacity.html

Важная часть: «IE8 использует новую запись: -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";»

Кроме того, Internet Explorer (6 и 8) считает, чтоэлемент должен иметь явно установленную width, прежде чем он станет прозрачным.Weird.Приведенная выше ссылка устанавливает ширину с помощью CSS, но не упоминает об этом странном требовании.

(хотя вы специально не спрашивали об этом, я бы рекомендовал использовать для этого jQueryтип задач - с ними значительно проще работать, см., например, здесь: http://api.jquery.com/fadeTo/)

Answer 3

Используйте jQuery.Мне известно, что это ответ клише, но в данном случае он точен: он автоматически обрабатывает причуды браузера для вас.*

Работает кросс-браузер (Opera, Chromium, Midori, Firefox, IE6 и IE8), с меньшим количеством кода, выполняет работу.Время проведено: 15 минут.