Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Прозрачное меню в ie6 (https://javascript.ru/forum/dom-window/2476-prozrachnoe-menyu-v-ie6.html)

mrsoul 02.01.2009 00:08

Прозрачное меню в ie6
 
Доброго времени суток! Есть прозрачное выпадающее меню (http://netsite.su), которое отлично работает под ff и другими браузерами кроме ie6. Для получения прозрачности используется функция:
function fixPNG(element) {
	if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent)) {
		var src;
		if (element.tagName == 'IMG') {
			if (/\.png$/.test(element.src)) {
				src = element.src;
				element.src = "/images/blank.gif";
			}
		}else {
			src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i);
			if (src) {
				src = src[1];
				element.runtimeStyle.backgroundImage = "none";
			}
		}
		if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
	}
}

Соответственно в стиле дива пишу filter: expression(fixPNG(this));
Так же использовался jquery (pngFix), но во всех случаях результат один и тот же: в шестом експлорере при наводе на второй или последующие пункты меню пропадает :( При этом прозрачность есть. Подскажите в чем может быть проблема?
P.S. С новым годом!

Андрей Параничев 02.01.2009 19:09

В том, что фильтр AlphaImageLoader рисует изображение поверх элемента и его детей.
Так что картинка в IE6 просто перехватывает события, которые должны работать на этих элементах.

Попробуйте "утопить" блок с картинкой с помощью z-index, а блок, принимающий события наоборот поднять.

Рубцов Дмитрий 03.01.2009 16:47

Спасибо огромное за ответ! Войти под своим ником не получилось:(
По теме нашел статью http://www.satzansatz.de/cssd/tmp/al...nsparency.html. Сделать чтобы оно не пропадало получилось, но с одной оговоркой: если под меню пусто, то все хорошо, если же под ним картинка, то оно исчезает. Это хорошо видно вот тут: http://netsite.su/profile/basket. Раздел Профиль работает как надо, а раздел Продукт - нет. При наведении курсора ниже первого пункта, все пропадает.

Octane 03.01.2009 17:30

Меню слишком прозрачное, при наведении на пункт «Заказ», просвечиваются надписи «Корзина» и «Ваша корзина пуста», которые мешают чтению пунктов меню.
Чтобы «AlphaImageLoader» работал корректно, для блока, к которому он применяется должны быть заданы размеры.

Рубцов Дмитрий 04.01.2009 00:14

Не помогло. Что было сделано: фильтр был применен не на элемент ul, а на элемент li, у которого можно задать высоту и ширину. Результат тот же: как только убираем курсор с текста, и под меню есть изображение или текст, оно пропадает. Если же под ним ничего нет, то все хорошо.

Рубцов Дмитрий 05.01.2009 14:44

Решение нашлось через этот скрипт http://www.dillerdesign.com/experiment/DD_belatedPNG/. Он не использует фильтр AlphaImageLoader, не создавая путаницы с z-index'ом.


Часовой пояс GMT +3, время: 13:53.